React hook's state using event to target a specific div

Question

I'm new to coding and react and i'm trying to update x4 divs so when the user clicks it will update the content inside. Currently i have the code updating however it updates all 4 div's instead of the specific div which is clicked.

I know this will be controlled by using event however slightly confused what exactly i need to include.

Any help in the correct direction would be greatly appreciated. Current code runs fine but content within all 4 divs update rather than the specific one which is clicked

  const [isActive, setIsActive] = useState(false)

  const toggleContent = e => {
    e.preventDefault()
    setIsActive(!isActive)
  }

Example div i'm trying to update when user clicks (currently i have x4 others which are the same logic but different HTML content. Currently when any of the 4 buttons are clicked, all x4 divs content change however i only want it to change the specific div which contained the button that was clicked

              {!isActive ?
                <article>
                    <h1>BEFORE CLICK TEXT</h1>
                      <a onClick={toggleClass}>BUTTON</a>
                </article>
                :
                <article>
                      <p>AFTER CLICK TEXT</p>
                      <a onClick={toggleClass}>Back</a>
                </article>
              }

You are having only one state, can you share more context or code so that we can help? — GokulnathP
What you have so far is fine, as long as it's part of the component that renders just one of the div elements. Please update your question with a minimal reproducible example demonstrating the problem you're having using it, ideally a runnable one using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
Hi, thanks for your response and please find question/code updated above. So my issue isn't with the code not running as it's updating the content fine but it's updating all 4 divs at the same time instead of the specific one which is clicked. I hope that makes sense and i'll be sure to do more research into how to ask a question better on here in future — Ashnathansmith

Siva K V Siva K V · Accepted Answer · 2021-03-08T11:35:06

maintain activeIndex instead of just active boolean. In render method, based on activeIndex and index decide the active attributes for div.

Try the snippet.

const content = ['abc', 'def', 'ghi', 'jkl'];

const Component = () => {
  const [activeIndex, setActiveIndex] = React.useState(-1);

  return (
    <div>
      {content.map((item, index) => 
        <div key={item} 
          style={{color: activeIndex === index ? "red" : "black" }} 
          onClick={() => setActiveIndex(index)}> {item} 
         </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>

React hook's state using event to target a specific div

1 Answers