在按钮单击时在组件内添加反应组件调用

Question

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 1

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>
     );
  }
}

Answer 2

You are looking for something like this:

import React from "react";

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

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

  render() {
    return (
      <div className="container">
        <h1>Please vote</h1>
        {this.state.langs.map((lang) => (
          <Panel name={lang} />
        ))}
        <button className="addNewButton" onClick={() => this.handleAddNew()}>
          <h3>Add new</h3>
        </button>
      </div>
    );
  }
}
export default App;