I have created one ponent where I am passing two props - taskName which is string and status which is boolean. I found a way to get taskName in my App.js but it failed in case of boolean type.

Doesn't react support boolean props ?

TaskComponent.js

export default class TaskComponent extends Component {
    render() {
        var taskStatus = this.props.status;
        if(taskStatus)
            return <h1><strike>Task: {this.props.taskName}</strike></h1>
    }
}

App.js

class App extends Component {
  render() {
    return (
      <TaskComponent taskName="Buy Milk" status={false} />
    );
  }
}

export default App;

I am getting this error while trying to get status value.

TaskComponent.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

I have created one ponent where I am passing two props - taskName which is string and status which is boolean. I found a way to get taskName in my App.js but it failed in case of boolean type.

Doesn't react support boolean props ?

TaskComponent.js

export default class TaskComponent extends Component {
    render() {
        var taskStatus = this.props.status;
        if(taskStatus)
            return <h1><strike>Task: {this.props.taskName}</strike></h1>
    }
}

App.js

class App extends Component {
  render() {
    return (
      <TaskComponent taskName="Buy Milk" status={false} />
    );
  }
}

export default App;

I am getting this error while trying to get status value.

TaskComponent.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

• javascript
• reactjs

• What does render return if(! taskStatus)? – Hodrobond Commented Jun 6, 2017 at 18:15

2 Answers 2

Because you are not returning anything when status is false (by default it will return undefined that's why you are getting the error), You forgot the else condition, you need to return something when status will be false.

If you don't want to render anything then return null.

write it like this:

render() {
    var taskStatus = this.props.status;
    if(taskStatus)
        return <h1><strike>Task: {this.props.taskName}</strike></h1>
    else return null;
}

Return a null is the taskStatus is false, thats the reason you get an error since nothing is returned is the if condition doesn't match

class App extends React.Component {
  render() {
    return (
      <TaskComponent taskName="Buy Milk" status={true} />
    );
  }
}

class TaskComponent extends React.Component {
    render() {
        var taskStatus = this.props.status;
        if(taskStatus)
            return <h1><strike>Task: {this.props.taskName}</strike></h1>
        else
            return null
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))

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