Set state on variable declared jsx

Question

I've been making a sidebar in React, of which i want to be able to switch out the content.

If I select an item from the screen I want the sidebar to update with its info, and I've done this by making a callback setting the item in a sidebar.js class. After that I want to set the right content for the sidebar.

I solved this by making sidebar.js hold different contentstates in its state and updating an index, and also to set the item as a state.

My problem is I want to access the item in one of the content states, but it doesn't seem to be updating.

The problem I have is that even after a setState({activeItem:item}) the prop item in contentX is still null!

I've tried setting a callback on setState, first updating the item and then setting the content but to no avail.

Anyone have a clue?

 class Sidebar extends React.Component{ constructor(props){ super(props) var placeHolder = <b> placeholder </b>; this.state = {activeItem: "I want to update this", activeContent: [placeHolder], activeIndex: 0} var content1 = <Content1 item={this.state.activeItem}> </Content1> this.contentBox = [content1] } render(){ const { activeIndex, activeContent } = this.state return( <div> {activeContent[activeIndex]} <button onClick={() => this.setState({ activeContent: [this.contentBox], activeIndex: 0, activeItem: "hello"})}> </button> </div> ) } } class Content1 extends React.Component{ render(){ return( <b> {this.props.item} </b> ) } } ReactDOM.render( <Sidebar />, document.getElementById("react") ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="react"></div> 

Answer 1

State should be used only to store values that will be used with in the component. However, one should not generate the components and store them in state.

In the below code, the state actievContent is set with a component with old item value. Say your states activeItem was with value hello1 and in the below code, your Content would be genreated with value hello1 and get stored in activeContent rather than hello which you might expect. So your Content1 won't get the new state value you are setting which is hello in this case.

<button onClick={() => this.setState({
  activeContent: [<Content1 item={this.state.activeItem} />],
  activeIndex: 0, 
  activeItem: "hello"})}> 
</button>

Instead you will have to do something like this.

<button onClick={() => this.setState({
  activeIndex: 0,
  activeItem: "hello"})}> 
</button>

Then in render method, you have to call the component with correct values. Instead of activeContent , place the component and pass the correct props to it.

render(){
 return(
  <div>
    <Content1 item={this.state.activeItem} />
    <button onClick={() => this.setState({
      activeIndex: 0, 
      activeItem: "hello"})}> 
    </button>
  </div>)
}