Need help with react...
Trying to implement a collapsible list of cards with weather information.
Already implemented the behavior of expand and collapse, but when i clicked on one panel the other panel open at the same time (i have 2 panels and need 7 to display weahter for 7 days of the week).

How can i open and close just one panel?

Code:

import React, { Component } from 'react';

import Moment from 'react-moment';



import RandomGif from './RandomGif.js';



const urlForCity = city => `https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/forecast/daily?q=${city}&units=metric&cnt=7&appid=1fba7c3eaa869008374898c6a606fe3e`



class OpenWapi extends Component {

  constructor(props) {

    super(props);

    this.state = {

      requestFailed: false,

      shown: false

    }

    this.componentDidMount = this.componentDidMount.bind(this);

    this.toggle = this.toggle.bind(this);

  }



  componentDidMount() {

    fetch(urlForCity(this.props.city))

      .then(response => {

        if(!response.ok) {

          throw Error(Network request failed)

        }

        return response;

      })

      .then(data => data.json())

      .then(data => {

        this.setState({

          weatherData: data

        })

      }, () => {

        this.setState({

          requestFailed: true

        })

      })

  }



  toggle() {

        this.setState({

            shown: !this.state.shown

        });

    }



  render() {



    if(this.state.requestFailed) return <p>Request Failed.</p>;

    if(!this.state.weatherData) return <p>Loading...</p>;



    return (

      <div>

        <p>City: {this.state.weatherData.city.name}</p>



        {/* Day 1 */}

        <div onClick={this.toggle} className=dayWeekItem>

          <div className=top-content>

            <div className=icon-weather></div>

            <div className=date>

              <div className=weekday>Today</div>

              <div className=day-long><Moment unix format=MMM DD YYYY>{this.state.weatherData.list[0].dt}</Moment></div>

            </div>

            <div className=temperature>

              <div className=temp-high>{parseInt(this.state.weatherData.list[0].temp.max)}º</div>

              <div className=temp-low>{parseInt(this.state.weatherData.list[0].temp.min)}º</div>

            </div>

          </div>

          <div className={this.state.shown ? toggleContent-open : toggleContent-closed} >

            <div className=weather-gif >

              <RandomGif keyword={this.state.weatherData.list[0].weather[0].description} />

            </div>

          </div>

        </div>







        {/* Day 2 */}

        <div onClick={this.toggle} className=dayWeekItem>

          <div className=top-content>

            <div className=icon-weather></div>

            <div className=date>

              <div className=weekday>Tomorrow</div>

              <div className=day-long><Moment unix format=MMM DD YYYY>{this.state.weatherData.list[1].dt}</Moment></div>

            </div>

            <div className=temperature>

              <div className=temp-high>{parseInt(this.state.weatherData.list[1].temp.max)}º</div>

              <div className=temp-low>{parseInt(this.state.weatherData.list[1].temp.min)}º</div>

            </div>

          </div>

          <div className={this.state.shown ? toggleContent-open : toggleContent-closed} >

            <div className=weather-gif >

              <RandomGif keyword={this.state.weatherData.list[1].weather[0].description} />

            </div>

          </div>

        </div>



        {/* Day 3 */}





        {/* Day 4 */}





        {/* Day 5 */}





      </div>

    )

  }

}



export default OpenWapi;