// JSON data is formed in this format.
chart:
functionalInfo: Array(5)
0: seedShapeDisplayText // one
materialsInfo: Array(1)
0:
igredientsInfo: Array(1)
0:
chartStatus: "minsu"
ingredientDisplayText:1
1: seedShapeDisplayText // two
materialsInfo: Array(1)
0:
igredientsInfo: Array(1)
1:
chartStatus: "Jeeny"
ingredientDisplayText:3
...
It seems like it would be easy, but I don't know
{Info.seedShapeDisplayText} -> one two three four ..
one onClick <div> Hi Number Minsu, Bar : 1 </div>
two onClick <div> Hi Number Jenny, Bar : 3 </div>
In summary, when 'one li tag text' is clicked, the div will output '{NumberStatus}' value corresponding to 'one text', and {functionInfolabels} corresponding value.
Click on the first button I want to print the first array values Minsu and 1. How would you like to write code?
let functionInfolabels = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.ingredientDisplayText);
console.log(functionInfolabels) // Array( 1,3,124 ..)
let NumberStatus = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.chartStatus)
console.log(NumberStatus) // Array ( Minsu, Jenny, Youngmin, ...)
return (
{ProductDetail && ProductDetail.chart?.functionalsInfo?.length ?
ProductDetail.chart?.functionalsInfo.map(Info => (
<li key={Info.id}>{Info.seedShapeDisplayText}</li>
)) : <li>There is not</li>}
// {Info.seedShapeDisplayText} -> one two three four ..
// one onClick <div> Hi Number Minsu, Bar : 1 </div>
// two onClick <div> Hi Number Jenny, Bar : 3 </div>
....
<div>
Hi Number {NumberStatus} // Minsu, Jenny, Youngmin, Jiho ...
<Bar
labels={functionInfolabels} // 1, 3, 124 ....
/>
</div>
)
Maintain state variable for selected and then on click you can show required content for selection.
const Component = () => {
let functionInfolabels = [1, 3, 124];
let NumberStatus = ["Minsu", "Jenny", "Youngmin"];
const [selected, setSelected] = React.useState(-1);
return (
<div>
{selected > -1 ? (
<div>{`Hi Number ${NumberStatus[selected]}, Bar : ${functionInfolabels[selected]}`}</div>
) : (
<div>Not selected</div>
)}
<div style={{ border: "1px solid lightgrey" }}></div>
{functionInfolabels.map((label, i) => (
<div key={label} onClick={() => setSelected(i)}>
{label}
</div>
))}
</div>
);
};
ReactDOM.render(<Component />, document.getElementById("app"));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="app"></div>