如何避免渲染中的嵌套三元？

Question

This is my case:

<Form onSubmit={submit}>
                    {something === 0 ?
                        (someData.length && someData.length > 0) ?
                            doSomething() : null :
                        (someOtherData.length && someOtherData.length > 0) ?
                            doSomethingElse() : null
                    }
</Form>

However, eslint rule is giving me error: Do not nest ternary expressions .

How can this be avoided? Can if - else be written in return (...) which renders data?

Answer 1

could you do the validations before the return of the render method

render () {
  myComponent = <></>;

  if (something === 0) {
      if (someData.length && someData.length > 0) {
        myComponent = doSomething();
      }
  } else if (someOtherData.length && someOtherData.length > 0) {
      myComponent = doSomethingElse();
  }

  return (
    <Form onSubmit={submit}>
      {<myComponent/>}
    </Form>
  )
}

If you want the validations within the component you could try it this way

<Form onSubmit={submit}>
    {
      something === 0 && someData.length && someData.length > 0
        ? doSomething()
        : something !== 0 && someOtherData.length && someOtherData.length > 0 && doSomethingElse()
    }
</Form>

Answer 2

Encapsulate the behaviour into a function on the component

renderComponent() {
  return something ?
    someOtherData.length && doSomethingElse() :
    someData.length && doSomething();
}

render() {
  ...
  return (
    <Form onSubmit={submit}>
      {renderComponent()}
    </Form>
  );
}

Tip - you don't need to explicitly pass null , React supports conditional rendering