Conditional rendering based on state

Question

I want to do some conditional rendering based on what is in state. My state looks something along the lines of this:

state = {
  text: '',
  properties: {
     someMoreData: [{...}]
  },
  moreData: ''
}

I want to do conditional rendering based on whether or not the someMoreData field exists within the properties key in my state. My current code looks like this:

render () {
     console.log(this.state)
     if('someMoreData' in this.state.properties)
     return (
         <div>
          ..
         </div>
     )
}

React is throwing an error stating Cannot use 'in' operator to search for 'someMoreData' in undefined

How to can i format my code so that if the someMoreData field exists, I get my JSX, and if not i render some other JSX.

That's not really how the in operator works nor how it is used in JavaScript. If you simply need to know whether or not someMoreData is not falsy, you can do if (this.state.properties.someMoreData) { ... some code ... }. — Alexander Nied
– Alexander Nied, Commented Oct 4, 2019 at 22:17

Alex Wayne · Accepted Answer · 2019-10-04 22:23:56Z

2

Typically, you just do something like:

render() {
  return (
    <div>
      {
        this.state.properties.someMoreData && (
          <div>Some other JSX stuff</div>
        )
      }
    </div>
  )
}

However, Cannot use 'in' operator to search for 'someMoreData' in undefined seems to indicate that for whatever reason this.state.properties is undefined. Not sure why with only the code you've posted, but I would look at that.

answered Oct 4, 2019 at 22:23

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Travis James · Accepted Answer · 2019-10-04 22:45:01Z

0

You can do that using ternary operators

render() {
  return (
    <div>
      {this.state.properties.someMoreData ? 
          // someMoreData exists
          (<div>Some JSX stuff</div>) 
          :
          //someMoreData does not exist
          (<div>Some other JSX stuff</div>)
      }
    </div>
  )
}

answered Oct 4, 2019 at 22:45

Travis James

1,94912 silver badges23 bronze badges

Collectives™ on Stack Overflow

Conditional rendering based on state

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related