Breaking News: Grepper is joining You.com. Read the official announcement!

toggling individual item using map in react

Balo answered on April 28, 2022 Popularity 3/10 Helpfulness 1/10

answer toggling individual item using map in react

toggling individual item using map in react

Comment

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: true,
      clicked: null // <-- start with null state
    }
  }
  
  componentDidMount() {
    fetch('https://restcountries.eu/rest/v2/all')
      .then(response => response.json())
      .then(data => this.setState({ data }))
      .finally(() => this.setState({ loading: false }));
  }

  clickHappens = (id) => () => {
    this.setState(prevState => ({
      clicked: prevState.clicked === id ? null : id, // <-- toggle back to null or to new id
    }));
  }
  
  render() {
    return (
      <div className="container">
        {this.state.data?.map((item, id) => (
          <div
            className="box"
            key={id}
            onClick={this.clickHappens(id)} // <-- pass id to toggle
          >
            {this.state.clicked === id ? // <-- check id match
              <Countryinformation
                continent={item["subregion"]}
                language={item["languages"][0]["name"]}
              />
              :
              <Countryname name={item["name"]}/>
            }
          </div>
        ))}
      </div>
    )
  }
}

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Apr 28 2022

Balo

0 Answers Avg Quality 2/10

toggling individual item using map in react

Contents

More Related Answers

toggling individual item using map in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.