I have a array of objects called data in fact it take from API in real code, I can not change its structure. so I want to display data in a table, it has a nested objects called list which contains location and price, I want to display as select option when user change location display own price front of it.
{data.serverTypes.map((Item, Index) => {
return (
<tr key={Index}>
<td>{Item.id}</td>
<td>
<select onChange={(e) => setPrice(e.target.value)}>
{Item.list.map((Location, Idx) => {
return (
<option value={Location.price}>
{Location.location}
</option>
);
})}
</select>
</td>
<td>{price}</td>
</tr>
);
})}
But I can not figure out how can I display each price form each location when I iterate object because I define state outside of loop. for better understanding please see live demo, change select option to see result. already it display price for all, but I want to display each location's price front of it.
CodePudding user response：
This might help
// The value can be empty but here it shows how the value will be
const [idx, setIdx] = useState('1,1')
value on select
<option value={[Item.id, Idx]}>
{Location.location}
</option>
And onChange
<select onChange={(e) => setIdx(e.target.value)}>
Shows the selected one
{(Item.id == idx[0]) ? <td>{data.serverTypes[idx[0] - 1].list[idx[2]].price}</td> : <td></td>}
I've tried it and got right results for the selected option. And you might think of using an array of ids to show all the values at the same time.. Something like:
['1,0', '1,1', '2,0', '2,1']
And change the indices accordingly..
Complete function:
export default function App() {
const [idx, setIdx] = useState('')
const data = {
serverTypes: [
{
id: 1,
list: [
{ location: "usa", price: 1000 },
{ location: "germany", price: 2000 }
]
},
{
id: 2,
list: [
{ location: "usa", price: 2500 },
{ location: "germany", price: 3000 }
]
}
]
};
return (
<div className="App">
<table>
<thead>
<tr>
<th>id</th>
<th>location</th>
<th>price</th>
</tr>
</thead>
<thead>
{data.serverTypes.map((Item, Index) => {
return (
<>
<tr key={Index}>
<td>{Item.id}</td>
<td>
<select onChange={(e) => setIdx(e.target.value)}>
{Item.list.map((Location, Idx) => {
return (
<>
<option value={[Item.id, Idx]}>
{Location.location}
</option>
</>
);
})}
</select>
</td>
{/* <td>{prices[id] && prices[id][idx]}</td> */}
{console.log('idx[0]', idx[0])}
{(Item.id == idx[0]) ? console.log('data', data.serverTypes[idx[0] - 1].list[idx[2]].price) : ''}
{(Item.id == idx[0]) ? <td>{data.serverTypes[idx[0] - 1].list[idx[2]].price}</td> : <td></td>}
{/* {console.log(data.serverTypes[Index].list)} */}
{/* {console.log(data.serverTypes[(idx[0] - 1)].list[idx[2]].price)} */}
{/* <td>{data.serverTypes[(idx[2])].list[idx[0] - 1].price}</td> */}
</tr>
</>
);
})}
</thead>
</table>
</div>
);
}