Add react component call inside component on button click Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Add react component call inside component on button click without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

  handleAddNew() {
    const name = prompt('What language do you want to add?')
  }

  render() { 
    return ( 
      <div className='container'>
        <h1>Please vote</h1>
        <Panel name='Python' />
        <Panel name='JavaScript' />
        <Panel name='PHP' />
        <Panel name='C#' />
                             <=============
        <button className='addNewButton' onClick={() => this.handleAddNew()}><h3>Add new</h3></button>
      </div>
     );
  }
}

I would like to add another call to the Panel component with the name variable in the handleAddNew function in the place that I have pointed to underneath the other Panel components.

Essentially when the button is clicked a prompt shows asking for the name of the desired language to be added and then creates a new component instance of Panel at the place of the arrow:

<Panel name={NAME_FROM_PORMPT} />     <=============

I assume this will use state and store the current votes for each panel which is stored in each Panel’s state:

class Panel extends React.Component {
  constructor(props) {
    super(props);
    this.state = { voteCount: 0 }
  }

  handleClick() {
    this.setState({voteCount: this.state.voteCount + 1})
  }

  render() { 
    return ( 
      <div className='panel'>
        <span>
          <h3>{this.state.voteCount}</h3>
        </span>
        <span>
          <h3>{this.props.name}</h3>
        </span>
        <span>
          <button onClick={() => this.handleClick()}><h3>VOTE</h3></button>
        </span>
      </div>
     );
  }
}

I hope this makes sense and feel free to ask questions so that you are more able to help. Thanks in advance.

Edit: I added most of the code for context but my apologies if it is too complicated

Answer

If you maintain the list panels and render them using map will simplify. On adding new panel from prompt, Just update the state (panels list).

Try some thing like below.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { panels: ['Python', 'Javascript', 'PHP', 'C#'] }
  }

  handleAddNew() {
    const name = prompt('What language do you want to add?')
    this.setState({ panels: [...this.state.panels, name] })
  }

  render() { 
    return ( 
      <div className='container'>
        <h1>Please vote</h1>
        {this.state.panels.map(pan =>  <Panel key={pan} name={pan} />)}
        <button className='addNewButton' onClick={() => this.handleAddNew()}><h3>Add new</h3></button>
      </div>
     );
  }
}
We are here to answer your question about Add react component call inside component on button click - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji