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 |             }

What errors do you get? When you use react you don't "hide" something from the page, you just render once again without it. — zerkms
– zerkms, Commented Sep 1, 2015 at 0:37
It's only expressions can be in the {...}. So simply: let result = null; if (some condition) { result = <p>{this.state.result}</p>; } before the return in the render() method then use {result}. — zerkms
– zerkms, Commented Sep 1, 2015 at 0:40

Chris Martin · Accepted Answer · 2015-09-01 00:48:05Z

4

You can't return two values from a function, so you have to wrap these in an element. I'm using div below.
{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>;
}

edited Sep 1, 2015 at 0:48

answered Sep 1, 2015 at 0:41

Chris Martin

30.9k12 gold badges83 silver badges142 bronze badges

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

1 Comment

zerkms Over a year ago

It turns an arbitrary value to a boolean. It would be this.state.value.length > 0 that is semantically a bit more obvious.

Collectives™ on Stack Overflow

Hide element on Reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related