/Javascript/React/Dynamic useState in react

Dynamic useState in react

const data = ["James", "John", "Jessica", "Jamie"];

function App() {
  const [visibilities, setVisibilities] = React.useState(() => data.map((x) => true));

  const handleClick = (event) => {
    const index = parseInt(event.currentTarget.dataset.index, 10);
    const newVisibilities = [...visibilities];
    newVisibilities[index] = !newVisibilities[index];
    setVisibilities(newVisibilities);
  };

  return (
    <div className="App">
      {data.map((value, index) => (
        <h1 data-index={index} onClick={handleClick} className={visibilities[index] ? "selected" : undefined}>
          Hello {value}, you are {visibilities[index] ? "visible" : "hidden"}!
        </h1>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("main"));

Source: stackoverflow.com

Similar codes

1 vote241 views1 answer
React js component parameters
Javascript React
0 vote238 views2 answers
React barcode scanner
Javascript React
0 vote292 views1 answer
How to change the choose file button text in react
Javascript React
8 votes264 views2 answers
React on link click scroll to top
Javascript React
0 vote253 views1 answer
Text and icon on same line react native
Javascript React
65 votes221 views6 answers
Route react
Javascript React
65 votes220 views6 answers
React routing
Javascript React
18 votes340 views3 answers
How to setup tailwind for reactjs
Javascript React
1 vote243 views3 answers
Sticky footer react
Javascript React
0 vote229 views1 answer
React router history not defined
Javascript React