CODEWITHSUNDEEP
javascriptreactjs
Lucky500
Lucky500

Reputation: 507

React component show only with new search?

I have this component that I only want to show with a new search.

 class App extends Component {

  constructor(props){
    super(props);
    this.state = { 
      isHidden: true
    }


    this.handleSearch = this.handleSearch.bind(this);   
  }
 
 handleSearch(){
    this.setState({
      isHidden: !this.state.isHidden
    })
  }
  
  // different file
  
    render(){
    return(
      <div className="search-input">
        <InputGroup>
          <Input placeholder='Enter Search' 
            onChange={this.props.handleChange}
            value={this.props.value} />
          <InputGroupAddon className='input-group-append'
            onClick={this.props.handleSearch}>
            <span className='input-group-text'>
              <i className="fa fa-search fa-lg fa-flip-horizontal"></i>
            </span>
          </InputGroupAddon>
        </InputGroup>    
      </div>
    )
  }
  
 //different file
 
 export default props => (
  <section className="my-3">
    {!props.isHidden ? 
      <SearchResultBar 
      value={props.value} /> : null }
  </section>
)

But what's happening right now is that this component is toggling when I click the InputGroupAddon, I have tried couple of things and no luck. How is the proper way to make sure that this container only shows when do a new search? instead of toggling when I click the submit button? is it because I am not using some sort of a form?

Upvotes: 0

Views: 60

Answers (1)

Sebastian Brockly
Sebastian Brockly

Reputation: 79

You have to use your instance method instead of the function passed as a prop. Something like this,

<InputGroupAddon className='input-group-append'
   onClick={this.handleSearch}>
   <span className='input-group-text'>
      <i className="fa fa-search fa-lg fa-flip-horizontal"></i>
   </span>
</InputGroupAddon>

Upvotes: 1

Related Questions