/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

0 vote198 views1 answer
Implement cai webchat in react native
Javascript React
0 vote227 views1 answer
Get size of a View in React Native
Javascript React
20 votes201 views6 answers
Build apk react native
Javascript React
157 votes778 views6 answers
Create new react app
Javascript React
26 votes242 views6 answers
React redirect to url
Javascript React
0 vote182 views1 answer
Import tippy react
Javascript React
1 vote206 views1 answer
How to position View absolute react native
Javascript React
0 vote189 views1 answer
Onclick hold react
Javascript React
17 votes207 views3 answers
Reducer react
Javascript React
1 vote199 views2 answers
This setstate previous state react
Javascript React