Hide element on Reactjs

Question

I have a concern, how do you hide an element in this special case.

I need to hide <p>{this.state.result}</p> when this.state.value has no length

let people = [
    'Messi',
    'JStar',
    'Cole',
    'Jorge'
  ];

class UniversalSearch extends Component {

  constructor() {
    super();
    this.state = {value : '', result: ''};
  } 

  render () {
    return (

       <TextField onChange={this._onChange.bind(this)}
                  onKeyUp={this._changeInput.bind(this)}
                  value={this.state.value} />

       <p>{this.state.result}</p> //NEED TO HIDE IT

    );
  }

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return people.map(function(person) {
      if (person.match(reg)) {
        return person;
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchPeople(this.state.value);
    this.setState({result: autoCompleteResult.join(' ')});

  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }  

}

I need to do it from the onChange or is it possible from the render method? When I try from the render method I am getting errors

I did it like this

        if (this.state.value.length) {
          <p style={searchOutput}>{this.state.result}</p>
        }

error

Module build failed: SyntaxError: /home/mretana/Documents/Projects/application-backoffice/app/components/pages/UniversalSearch/index.js: Unexpected token (47:17)
  45 |                     onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
  46 |             {(this.state.value)
> 47 |               <p style={searchOutput}>{this.state.result}</p>
     |                  ^
  48 |             }

Answer 1

1. You can't return two values from a function, so you have to wrap these in an element. I'm using div below.

2. {condition && el} is a nice way to conditionally show an element, as suggested by the False in JSX documentation.

---

render: function () {
    return <div>
       <TextField onChange={this._onChange.bind(this)}
                  onKeyUp={this._changeInput.bind(this)}
                  value={this.state.value} />
       {!!this.state.value.length &&
           <p>{this.state.result}</p>}
    </div>;
}