I am making a react expense tracker. I have my App then inside of it I have a Form component with a button. Then I have a TableData component I pass state input to through props. However When I send it over it doesn't post another table Row under the table it just stays at one. I figure I need to map something. Ive tried mapping the state input prop and passing it that way. But I'm not achieving what I want. Im not able to find what I need on google either. Any hints would be amazing thank you. Side note new to using stackOverflow so if I messed up my post at all apologies
<tr className='tableRow'>
<td>{props.userState.payment}</td>
<td>{props.userState.purchase}</td>
<td>{props.userState.date}</td>
<td>{props.userState.location}</td>
<td>{props.userState.price}</td>
<td><button onClick={onButtonClick}>X</button></td>
</tr>
Above code is TableData.js
Below code is in my Form.js
<TableData userState={formValues}
You need to have formValues as an array of row-objects, to map each object to each row.So when you add it, it will be pushed into the array and will be displayed in table.
Inside tableData, You should be mapping userState as below:
{props.userState?.map(rowItem => (
<tr key={rowItem.id} className='tableRow'> // pass any unique value(id) to key
<td>{rowItem.payment}</td>
<td>{rowItem.purchase}</td>
<td>{rowItem.date}</td>
<td>{rowItem.location}</td>
<td>{rowItem.price}</td>
<td><button onClick={onButtonClick}>X</button></td>
</tr>
))}
key is important in mapping - https://betterprogramming.pub/why-react-keys-matter-an-introduction-136b7447cefc