Showing two different components based on return value in react js

Question

I have search function where on entering text it returns the object from an array(json data) and based on the condition (whether it as an object or not) I need to show two different components ie. the list with matched fields and "No matched results found" component.

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTextData: '',
      isSearchText: false,
      isSearchOpen: false,
      placeholderText:'Search Content',
      filteredMockData: [],
      dataArray: []
    };
  }
  handleSearchChange = (event, newVal) => {
    this.setState({ searchTextData: newVal })
    if (newVal == '') {
      this.setState({ clearsearch: true });
      this.setState({
        filteredMockData: []
      });
      this.props.onDisplayCloseIcon(true);
      
    } else {
      this.props.onDisplayCloseIcon(false);
      searchData.searchResults.forEach((item, index, array) => {
      this.state.dataArray.push(item);
    });
    this.setState({ filteredMockData: this.state.dataArray });
    }
  }
  clearInput = () => {
    this.setState({ searchTextData: '' })
  }
  isSearchText = () => {
    this.setState({ isSearchText: !this.state.isSearchText });
  }
  onSearchClick = () => {
    this.setState({ isSearchOpen: !this.state.isSearchOpen });
    this.setState({ searchTextData: '' });
    this.props.onDisplayCloseIcon(true);
  }

  renderSearchData = () => {
    const SearchDatasRender = this.state.dataArray.map((key) => {
      const SearchDataRender = key.matchedFields.pagetitle;
      return  (<ResultComponent results={ SearchDataRender } /> );
    })
    return SearchDatasRender;  
  }
  renderUndefined = () => {
    return ( <div className = "search_no_results" >
             <p> No Recent Searches found. </p> 
             <p> You can search by word or phrase, glossary term, chapter or section.</p> 
            </div>
    );
  }
  render() {
    return ( <span>
    <SearchIcon searchClick = { this.onSearchClick } /> 
    {this.state.isSearchOpen &&
      <div className = 'SearchinputBar' >
        <input
          placeholder={this.state.placeholderText}
          className= 'SearchInputContent'
          value = { this.state.searchTextData}
          onChange = { this.handleSearchChange }
        /> 
      </div>
    }
    {this.state.searchTextData !== '' && this.state.isSearchOpen &&
    <span className='clearText'>
      <ClearIcon className='clearIcon' clearClick = { this.clearInput }/>
    </span>
    } 
  {this.state.searchTextData !== '' && this.state.isSearchOpen &&
  <div className="SearchContainerWrapper"> 
    <div className = "arrow-up"> </div>
    <div className = 'search_result_Container' >
        <div className = "search_results_title" > <span> Chapters </span><hr></hr> </div> 
        <div className="search_show_text" >
          <ul className ="SearchScrollbar"> 
            {this.state.filteredMockData.length ? this.renderSearchData() : this.renderUndefined() }
          </ul>
        </div>              
    </div>
  </div>}
  </span>
  );
  }
}
Search.propTypes = {
  intl: intlShape.isRequired,
  onSearchClick: PropTypes.func,
  isSearchBarOpen: PropTypes.func,
  clearInput: PropTypes.func,
  isSearchText: PropTypes.func
};

export default injectIntl(Search);

Search is my parent component and based on the matched values I need to show a resultComponent like

class ResultComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };

  }
  
  render(){
  	console.log(this.props.renderSearchData(),'Helloooo')
    return(<p>{this.props.renderSearchData()}</p>)

  }

  
}

ResultComponent.propTypes = {
  results: PropTypes.string.isRequired
};

I'm getting an error "renderSearchData is not an function".I'm new to react and Hope someone can help.

Answer 1

The only prop passed to ResultComponent component is results

So in ResultComponent Component Replace

this.props.renderSearchData()

With

this.props.results