CODEWITHSUNDEEP
javascriptreactjs
Fin HARRIS
Fin HARRIS

Reputation: 114

Add react component call inside component on button click

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

Upvotes: 0

Views: 107

Answers (2)

Siva Kondapi Venkata
Siva Kondapi Venkata

Reputation: 11001

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

Upvotes: 2

P&#233;ter Le&#233;h
P&#233;ter Le&#233;h

Reputation: 2119

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;

Upvotes: 2

Related Questions