How to send props to a component in react with conditional?

user_14230840 0
Viewed 170

I'm trying to pass a prop to a relative child in react, only if it meets certain conditions.

I know that you can make a type of conditional to send props like this:

<SomeComponent

ConditionalProp={
(this.state.exampleData === 'some string') ? this.state.exampleData : null
}

/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

But I need to do more validations, so far this is what I have:

<MyComponent

ConditionalProps={ 
  (this.props.channel && this.props.some) ?  
    (this.props.some.conv && (this.props.some.conv.id === this.props.channel.conv.id) ? 
        this.props.channel :''
    (this.state.contentId === this.props.channel)? this.props.channel:''
): null

}

/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Let me explain, what I want to do is: if channel and some exist, two possible cases will be validated: if some.conv exists and also some.conv.id is === channel.conv.id? then it must be passed as prop channel.

If that is false and contentId exists and also is exactly equal to channel then channel is passed.

If neither of those cases is true, a null or an empty string must be passed '' (I have no problem with either of the two)

I am not very sure that what I did is correct and what I am sure is that it is not the best way to carry it out

reactjs web-applications html javascript
2 Answers

If you are using ES7, you can try null propagation operator:

this.props.channel?.conv?.id === this.props.some?.conv?.id

So you don't have to check if this.props.channel and this.props.channel.conv exists.

Also you can try anonymous function:

<MyComponent
  ConditionalProps={(() => {
    if (this.props.some?.conv?.id === this.props.channel?.conv?.id) {
      // some more code
      // return ...
    }

    return null;
  })()}
/>;

Also, your code won't work because you try to compare something with Object at:

this.state.contentId === this.props.channel

such as {} === {} will be false. Use JSON.stringify() and compare two strings.

user_118295240

  1. If you only have a few conditions you can nest them in the ternary operator like so

    conditionalProps = a>b?"value1":b>c?"value2":c>d?"value3":"value4"

So I am checking a>b and if thats satisfied assigning "value1" else checking another condition and so on in a single line.

  1. You could write a function to check for many conditions.

    const conditionalProps = makeConditionalProps(channel)

and the function (please replace with your conditions below. Its just an example)

  const makeConditionalProps = (channel,some) => {
    let propsToReturn = false;
    if (channel.somecondition==true) {
      if (channel.conv.id == some.channel.id){
          propsToReturn = "whatEverProps"
       }
    }
   return propsToReturn;
}

And in your component

<MyComponent
ConditionalProps={conditionalProps} />

Note that conditionalProps field has false in the conditions were not satisfied so you can use that in your child like conditionalProps? to see if it exists.

user_37171140
Related