React.FC 迭代 json 道具

Question

i am a React/Typescript newbie. I have a question. I am converting an app from straight react to also using typescript. So I converted a functional component to a React.FC. I was using a json map inside the original method but that doesnt seem to work with FC. Do you have any suggestions? It chokes on the 'const rows = jeffsData.map(...' saying 'map' doesnt exist. I didnt find anything helpful on the inet and I have searched. Thank you!

type shopData = {
DisplayName: string;
SJ_ID: string;
IsGoodJeffOrBadGeoff: boolean;
LastUpdatedTimeStamp: string;

};

interface jeffsDataProps {
jeffsData : shopData;
}

const TableBody: React.FC<jeffsDataProps> = ({jeffsData}) => {
const rows = jeffsData.map((row, index) => {
return (
<tr key={index}>
<td style={{ textAlign: 'left' }}>{row.DisplayName}</td>
<td>{row.SJ_ID}</td>
<td>{row.IsGoodJeffOrBadGeoff}</td>
<td>{row.LastUpdatedTimeStamp}</td>

</tr>
);
});

Answer 1

I think you intended to make jeffsData an array(map is not available on objects) to do that change interface to

interface jeffsDataProps {
jeffsData : shopData[];
}

and pass an array as the jeffsData