react Creating dynamic components-CodePudding

I have li key={Info.id}> I want to make <div>{NumberStatus} </div> output the data corresponding to the id value when the corresponding id value is clicked.

In summary, when 'one li tag text' is clicked, the div will output '{NumberStatus}' value corresponding to 'one text', and {functionInfolabels} corresponding value.

How would you like to write code?


 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>


)

CodePudding user response：

The most idiomatic way is to set state value when your <li> element is clicked, and then render that state value.

Using a functional component, you can use the useState hook in a straight forward manner.

Please note: I took some liberty with your code sample, and added a button tag, and a helper function to set the value.

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>


      )
}

CodePudding user response：

If you could explain a bit more on your question, I think it will be easy to understand and answer.

Here is the solution as I got your question,

in here I'm using the state as numberStatus and when your click on any of the li i'm setting the numberStatus state with the numberStatus data of the selected li.

also in the bottom rendering part I'm checking that the state of numberStatus is having a value and if only I make it display.

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>
  );
}