// 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 ...Parece que sería fácil, pero no sé.
{Info.seedShapeDisplayText} -> one two three four ..
one onClick <div> Hi Number Minsu, Bar : 1 </div>
two onClick <div> Hi Number Jenny, Bar : 3 </div>
En resumen, cuando se hace clic en 'un texto de etiqueta li', el div generará el valor '{NumberStatus}' correspondiente a 'un texto' y {functionInfolabels} valor correspondiente.
Haga clic en el primer botón. Quiero imprimir los primeros valores de matriz Minsu y 1. ¿Cómo le gustaría escribir el código?
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> )Mantenga la variable de estado para selected y luego, al hacer clic, puede mostrar el contenido requerido para la selección.
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>