react expand and collapse just one panel

Question

Need help with react... Trying to implement a collapsible list of cards with weather information. Already implemented the behavior of expand and collapse, but w

Answer 1

They all will collapse always with your implementation.

You have a state

state = {
  shown: true
}

You have a function to toggle it

toggle = () => {
   this.setState(shown: !this.state.shown)
}

And you render the component, using the this.state.shown in two places, but the value will always be one true or false

render() {
    return(

        

           { this.state.shown ?  : null }
        
        

          { this.state.shown ?  : null }
        
    
)
}

So where ever you toggle, once the state is updated and render method is called again to paint the view, both sections of divs get the sameBoolean` value. Therefore, they both collapse.

Best Solution I can offer for this problem will be:

Create a separate component which has two jobs to be do: 1. Maintains its own state, of collapse true or false. 2. Render the children given to it without wondering what they might be.

So let say

 class WeatherWidget extends React.PureComponent {
   state= {
     shown: true
   }     
   toggle = () => this.setState({shown: !this.state.shown})
   render() {
       return(
         

            

            

            

              
Today
              

                    {this.props.date}
              
            
            

              
{parseInt(this.props.maxTemp)}º
              
              
{parseInt(this.props.minTemp)}º
              
            
         
             

                 

                    
                 
              
     
       )
   }


 }

So you create a reusable component which manages its own state ( React Paradigm/ Composition brings reusability)

As for displaying multiple widgets

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
     })
  })
}
render() {
    if(this.state.requestFailed) return 
Request Failed.
;
    if(!this.state.weatherData) return 
Loading...
;

    return(
    

       
City: {this.state.weatherData.city.name}
       
       
    
    )
} 

Hopefully, this solves the use case.