Tengo li key={Info.id} > Quiero hacer que <div>{NumberStatus} </div> los datos correspondientes al valor de id cuando se hace clic en el valor de identificación correspondiente.
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.
¿Cómo te gustaría escribir código?
let functionInfolabels = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.ingredientDisplayText); let NumberStatus = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.chartStatus) return ( {ProductDetail && ProductDetail.chart?.functionalsInfo?.length ? ProductDetail.chart?.functionalsInfo.map(Info => ( <li key={Info.id}>{Info.seedShapeDisplayText}</li> )) : <li>There is not</li>} // seedShapeDisplayText; // one two three four five ... // <li key===1 onClick <div> Hi Number Minsu, Bar : 1 </div> // <li key===2 onClick <div> Hi Number Jenny, Bar : 3 </div> .... <div> Hi Number {NumberStatus} // one : Minsu, two : Jenny, three : Youngmin, four : Jiho ... <Bar labels={functionInfolabels} // one : 1, two: 3, three: 124 .... /> </div> )Si pudiera explicar un poco más sobre su pregunta, creo que será fácil de entender y responder.
Aquí está la solución ya que recibí tu pregunta,
aquí estoy usando el estado como numberStatus y cuando hace clic en cualquiera de los li , estoy configurando el estado numberStatus con los datos numberStatus del li seleccionado.
también en la parte de representación inferior, verifico que el estado de numberStatus tenga un valor y si solo hago que se muestre.
function MyComponent() { const [numberStatus, setNumberStatus] = React.useState(""); const dataList = [ { title: "Title 01", numberStatus: "one" }, { title: "Title 02", numberStatus: "two" }, { title: "Title 03", numberStatus: "three" }, ]; return ( <div> <ul> {dataList.map((val, key) => { return ( <li key={key} onClick={() => setNumberStatus(val.numberStatus)}> {" "} {val.title}{" "} </li> ); })} </ul> {numberStatus && <div>Hi Number {numberStatus}</div>} </div> ); }La forma más idiomática es establecer el valor de estado cuando se hace clic en su elemento <li> y luego representar ese valor de estado.
Usando un componente funcional, puede usar el useState de una manera directa.
Tenga en cuenta: me tomé algunas libertades con su ejemplo de código y agregué una etiqueta de botón y una función de ayuda para establecer el valor.
const MyComponent = () => { const [infoText, setInfoText] = React.useState(''); const onButtonClick = (text) => { setInfoText(text); } return ( {ProductDetail && ProductDetail.chart?.functionalsInfo?.length ? ProductDetail.chart?.functionalsInfo.map(Info => ( <li key={Info.id}><button onClick={e=>onButtonClick(Info.seedShapeDisplayText)}>{Info.seedShapeDisplayText}</button></li> )) : <li>There is not</li>} // seedShapeDisplayText; // one two three four five ... <div> Hi Number {infoText} // one : Minsu, two : Jenny, three : Youngmin, four : Jiho ... </div> ) }