title: Toggle specific item but not others when using map() and onClick() in React
body: <p>I've created a project where I call an API to list all of the countries in the world and some facts about them. I have each country on a different card, and I want the card to say the country's name on the front and then flip to the back and show the country's continent and language when the user clicks the card. The problem is that when the user clicks the card, all of the cards flip. I realize now that I need to use id or something similar to target specific cards, but I can't figure out how.</p>
  <p>What I've tried: There are various versions of this question on here and elsewhere, but often the code is much longer and it's harder to follow the advice, and some of those deal with changing the CSS or situations different from what I'm trying to do. I tried to create a state of 'clickedArray' to create an array that shows true of false for if any specific index is clicked, but I couldn't figure out where I could call a method that fills that array, and also I don't know if that's the correct strategy anyway.</p>
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [],
        loading: true,
        clicked: false
      }
    }
    
    componentDidMount() {
      fetch('https://restcountries.eu/rest/v2/all')
        .then(response =&gt; response.json())
        .then(json =&gt; this.setState({data: json}));
      this.setState({loading: false});
    }
  
    clickHappens = () =&gt; {
      this.setState({clicked: this.state.clicked ? false : true});
    }
    
    render() {
      return (
        &lt;div className=&quot;container&quot;&gt;
          {this.state.data?.length &gt; 0 &amp;&amp; this.state.data.map((item, id) =&gt; (
            &lt;div className=&quot;box&quot; key={id} onClick={this.clickHappens}&gt;
              {this.state.clicked === false ? 
                &lt;Countryname name={item[&quot;name&quot;]}/&gt;
                :
                &lt;Countryinformation continent={item[&quot;subregion&quot;]} language={item[&quot;languages&quot;][0][&quot;name&quot;]} /&gt;
              }
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      )
    }
  }
  
  class Countryname extends React.Component {
    render() {
      return (
        &lt;h1&gt;{this.props.name}&lt;/h1&gt;
      )
    }
  }
  
  class Countryinformation extends React.Component {
    render() {
      return (
        &lt;&gt;
        &lt;p&gt;{this.props.continent}&lt;/p&gt;
        &lt;p&gt;{this.props.language}&lt;/p&gt;
        &lt;/&gt;
      )
    }
  }
  
  export default App;
  </code></pre>