Recipe Box React-Bootstrap Question

1

I’m doing the recipe box project. I’m trying to have the newly added entry in my Accordion be the one that’s expanded when it’s added. I’m rendering two different versions with different defaultActiveKey values, but it only displays one version. If I hard-code numbers for defaultActiveKey, it only ever displays the displayNormal version. The state that I’m testing (this.state.justAddedAnother in Box) seems to be updating when I want.
Does anybody know whether I can/how to do this?

This is the version I’m working on:
https://codepen.io/ler/pen/NdzBVO?editors=0010

2

You can do it like this:

  • add a state called activeRecipeKey, initial value is 0 (the first recipe)
  • change this value to number of recipes when you add a new recipe, so that the most recently added recipe is the active record
  • when you render your accordion, pass activeKey={this.state.activeRecipeKey} <==== note, do not pass defaultActiveKey, this is not the same thing
  • the trick here is that if you start specifying an activeKey, then no other panel will open! So, then to make sure the others can be opened and closed, you have to add a new method, so that any selected panel opens. IE… your method resets activeRecordKey to whichever panel has been clicked on.
  setSelectedPanel: function(i){
    this.setState({activeRecipeKey: i});
  },

and pass that down to Panel component in the onSelect event.

  forEachEntry: function(text, i) {
        return(
          <Panel header={this.state.entries[i]["title"]} 
                 eventKey={i}  
                 collapsible 
                 onSelect={this.setSelectedPanel.bind(null,i)}>
                            
                            <Recipe key={i} index={i} del={this.deleteEntry} edit={this.editEntry} title={this.state.entries[i]["title"]} text={this.state.entries[i]["ingredients"]}>
                            </Recipe>
                          </Panel>)
                 },

I did a fork to show it working: http://codepen.io/yuzu-r/pen/KaeJGv
One thing I noticed is that the code that I wrote means one panel is always expanded. I’m not sure how to get around that, maybe you can set the activeRecordKey to some number that doesn’t exist in the panel keys.

3

Thanks! That’s what I was looking for.