I need to render specific data based on the value attribute assigned in the li tag, which is stored in a state called otherState in my implementation
const [otherDetails, setOtherDetails] = React.useState([]);
const state = {
listitems: [
{
id: 1,
vendorContact: "User 1",
otherDetails: [
{
firstName: 'U',
lastName: 'I',
city: 'O',
zip: '560084'
}
]
},
{
id: 2,
vendorContact: "User 2",
otherDetails: [
{
firstName: 'D',
lastName: 'N',
city: 'W',
zip: '560084'
}
]
},
{
id: 3,
vendorContact: "User 3",
otherDetails: [
{
firstName: 'A',
lastName: 'B',
city: 'V',
zip: '560084'
}
]
}
]
};
I am using the value attribute of the li tag to display the data in a list:
<ul className="sidenavList">
{state.listitems.map(listitem => (
<li key={listitem.id} className="row" value={listitem.otherDetails} onClick={handleSelection}>
{listitem.vendorContact}
</li>
))}
</ul>
This is the part of the code where I am actually rendering the data using React:
<div className="right"> {
<span>{otherDetails}</span>
}
</div>
Updating the state on event
const handleSelection = (e) => {
e.preventDefault();
setOtherDetails(e.target.getAttribute('value'))
}