Is it possible to return and display a component using a callback function in setState?

user_9710530 0
Viewed 44

I am trying to display a component when an option is selected from the drop down. I haven't been able to get the "Func" component or any HTML to display but can log stuff to the console.

import React from 'react';
import Func from './components/Func'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      option: ''
    }
    this.handleChange = this.handleChange.bind(this)
    this.changeFunc = this.changeFunc.bind(this)

  }

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

  changeFunc() {
    return <Func />
  }

  render() {
    return (
      <div>
        <label htmlFor="Func">Choose: </label>
        <select name="options" id="options" onChange={this.handleChange}>
          <option value=""></option>
          <option value="Currency Converter">Currency Converter</option>
          <option value="Win!">Win!</option>
        </select>
      </div>
    )
  }
}

export default App;

Isn't really much there but the Func component:

import React, { Component } from 'react';

class Func extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h2>
        func
      </h2>
    );
  }
}

export default Func;
reactjs
2 Answers

Try this, keep a toggle flag which becomes true when the action is performed. And you can use that to call the <Func/> based on the toggle 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      option: '',
      toggle: false
    }
    this.handleChange = this.handleChange.bind(this)
    this.changeFunc = this.changeFunc.bind(this)

  }

  handleChange(e) {
    this.setState({
      option: e.target.value, toggle:!this.state.toggle
    });
  }

  render() {
    return (
      <div>
        <label htmlFor="Func">Choose: </label>
        <select name="options" id="options" onChange={this.handleChange}>
          <option value=""></option>
          <option value="Currency Converter">Currency Converter</option>
          <option value="Win!">Win!</option>
        </select>
        {this.state.toggle?
         <Func/>
         :null}
      </div>
    )
  }
}

export default App;
user_116003230

If you want it embedded within this component, you can handle it with a conditional in the render method:

render() {
    return (
      <>
        <div>
          <label htmlFor="Func">Choose: </label>
          <select name="options" id="options" onChange={this.handleChange}>
            <option value=""></option>
            <option value="Currency Converter">Currency Converter</option>
            <option value="Win!">Win!</option>
          </select>
        </div>

        {
           this.state.option &&
              <YourComponent/>
        }
      </>
    )
  }

If you wish to render it as a separate component then you can use the ReactDOM.render() method directly - Usually this is used for modals or other components that don't need to be embedded within the rest of the app. In which case you can do:

changeFunc() {
  // This can be whatever element you want (doesn't have to be body)
  const container = document.getElementById("body");
  ReactDOM.render(<Func/>, container);
}
user_132222310
Related