I checked other questions with the error but no luck. I am creating an edit order screen. I get the order data from the state and assign to tableData. And when using tableData to add the content to a table I get the error "TypeError: Cannot read properties of undefined (reading 'map')"
const PurchaseOrderEditScreen = ({history}) => {
const dispatch = useDispatch()
const { id } = useParams()
const orderId = id
const orderDetails = useSelector( state => state.orderDetails )
const { loading, error, order } = orderDetails
const [tableData, setTableData] = useState([])
useEffect(() => {
if(!userInfo){
history.push('/login')
}
if(!order || order._id !== orderId ){
dispatch(getOrderDetails(orderId))
}
},[dispatch, history, userInfo, orderId, order])
return(
<>
{loading ? <Loader />
: error ? <Message variant='danger'>{error}</Message>
: (
<div>
<Table striped bordered hover responsive='md' className='table-sm mt-3' id="table-to-xls">
<thead>
<tr>
-----
</tr>
</thead>
<tbody>
{tableData.orderItems.map(item => (
<tr key={item._id} >
------
</tr>
))}
</tbody>
</Table>
If I try to add content to table from order like order.orderItems.map(item it works but it does not with tableData.orderItems.map. I could see in console.log of tableData at first render as empty.
While I am writing code with order.orderItems.map it works, then when I change to tableData.orderItems.map it works fine without any error. I could see when auto render happen after code change the tableData in console.log has data. But at the same time when refresh the page it throws the error.
I added the below code as well but still the same issue.
useEffect(()=>{
setTableData(order)
},[order])
Can anyone please help on this and let me know why at the initial console.log tableData shows empty. Please let me know if you need further details
on your first render you initialize tableData with empty array then tableData.orderItems is undefined. Therefore you cannot use function map on undefined that why you have an error. To fix that you can initialize tableData like so :
const [tableData, setTableData] = useState({ orderItems: [] })