Function is returning [object Object] instead of html in React/Redux

Question

I am trying to get the names of the corresponding breweries to pop up when someone selects the name of the beer. In the filterSearch function, I can get the name to pop up if I don't wrap it in a div. As soon as I put and JSX in, it returns [object Object]. I eventually want to return cards with various information on it, but for now, I am taking it in baby steps.

Any help would be greatly appreciated!

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { fetchBeerData } from '../../store/store';
 import { bindActionCreators } from 'redux';
// import { Cards } from '../Cards/Cards';
 
 class PopulateDropdowns extends Component {
 
   state = {
     beerData: []
   }
   
   initialized = false;
 
   componentWillReceiveProps(nextProps){
     if(!this.initialized){
       this.initialized = true;
       this.setState({
        beerData: nextProps.beerData
       })
     }
   }
 
   componentWillMount(){
     this.props.fetchBeerData();
   }
 
   populateSelectLists = () => {
    let brewArr = this.state.beerData
    .sort((a, b) => a[this.props.dataName].localeCompare(b[this.props.dataName]))
    .filter((data, index, self) =>
      index === self.findIndex((d) => (
      d[this.props.dataName] === data[this.props.dataName]
      ))
    )
    let newBrewArr = brewArr.map((e, index) =>
       <option key={index}> {e[this.props.dataName]} </option>
    )

    return(
      this.props.dataName==='Brewery Name'
      ? 
      <form>
        <div className="form-group">
          <label htmlFor="exampleFormControlSelect1">{this.props.label}</label>
            <select className="form-control" id="brew-form-select">
             {newBrewArr}
            </select>
          </div>
      </form>
      :
      <form>
      <div className="form-group">
        <label htmlFor="exampleFormControlSelect1">{this.props.label}</label>
          <select className="form-control" id="beer-form-select">
           {newBrewArr}
          </select>
        </div>
    </form>
    )
  }

  handleSubmit = (e) => {
    e.preventDefault();
    document.getElementById('cardDiv').append(this.filterSearch())
  }

  filterSearch = () => {
    let brewArr = this.state.beerData
    let brewMap = brewArr.filter(this.checkValue).map((res, index) => {   
      return(
        <div key={index}>
          {res['Brewery Name']}
        </div>
      )    
    })
    return (brewMap)
  }

  checkValue = (brew) => {
    return brew['Beer Name'] === this.selectValue()
  }
   
  selectValue = () => {
    let brewVal = document.getElementById('brew-form-select').value
    let beerVal= document.getElementById('beer-form-select').value
    return (this.props.dataName==='Brewery Name' ? brewVal : beerVal)
  }

   render() { 
     return (
       <div id='mainDiv'>
          {this.populateSelectLists()}
          <div className='col-12 text-center' id='cardDiv'></div>
          <button type='submit' onClick={this.handleSubmit}>SUBMIT</button>
       </div>
     )
   }
 }
 
 const mapStateToProps = state => {
   if (state.beerData.length > 0) {
     return {
       beerData: state.beerData
     }
   } else {
     return {};
   }
 };
 
 const mapDispatchToProps = dispatch => {
   return bindActionCreators({ fetchBeerData }, dispatch)
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(PopulateDropdowns);

Answer 1

JSX gets compiled to a bunch of React.createElement calls, so when you do document.getElementById('cardDiv').append(someJSX), it will be rendered as an object in the DOM.

You could have a variable in your state called e.g. submitted, and in your handleSubmit method call this.setState({ submitted: true }), and then in your render method check if submitted is true, and render your beerData if that is the case.

Example

class PopulateDropdowns extends Component {
  state = {
    beerData: []
  };

  handleSubmit = e => {
    e.preventDefault();
    this.setState({ submitted: true });
  };

  // ... 

  render() {
    return (
      <div id="mainDiv">
        {this.populateSelectLists()}
        <div className="col-12 text-center" id="cardDiv">
          {this.state.submitted &&
            this.state.beerData.filter(this.checkValue).map((res, index) => {
              return <div key={index}>{res["Brewery Name"]}</div>;
            })}
        </div>
        <button type="submit" onClick={this.handleSubmit}>
          SUBMIT
        </button>
      </div>
    );
  }
}