React: Display component based on select option

JavaScript
1

Hey i’m having trouble rendering data based on the option selected. when i try document.selectElementById to select option i get an error. any thoughts??

I just want to select option and render a different component based on selection

class Booklist extends React.Component {

constructor(props) {

super(props);

this.state = { option: 'Parchment House' };

this.handlePick = this.handlePick.bind(this);

// this.handleSubmit = this.handleSubmit.bind(this);

this.componentDidMount = this.componentDidMount.bind(this)

}

displayWarehouse() {

return (

<select id="opt" onChange={this.handlePick} value={this.state.option}>

{this.props.data.Warehouse.map((warehousename) => {

return <option key={warehousename.warehouseID}>{warehousename.name}</option>

})}

</select>

);

}

displayBooks(num) {

return this.props.data.Warehouse[num].books.map((titles) =&gt; {
return (
<div key={titles.bookID}>
<li>
{titles.title} {titles.stock.balance}
</li>
</div>

);

});

}

handlePick(e) {

console.log(this.state.option);

this.setState({ option: e.target.value });

// console.log(this.state.option);

}

componentDidMount() {

// e.preventDefault();

if (this.state.option) {

return <div>{this.displayBooks(1)}</div>

}

return <div>{this.displayBooks(0)} </div>

}

render() {

if (this.props.data.loading) {

return  <div>loading... </div>

}
 <div className="zero" style={{ height: '100%' }} > 

<div className="titlebar">

<label>Select Option</label>

{this.displayWarehouse()}

</div>

</div>

);

}

}

export default graphql(fetchbooks)(Booklist);
2

Can’t see selectElementById in your code, but:
1. such method doesn’t exist
2. if you’re doing document.blabla in React code it’s usually time to stop and think why is that necessary.