React.js将组件插入子级

Question

<div>
   <p>Test</p>
</div>

<button onClick={AddPara()}> Add New Paragraph </button>

function AddPara (){
   return(
      <div>
         <p> New Para </p>
      </div>
   )
}

I am trying to get the new paragraph under the main Div that includes original paragraph ( <p>test</p> ), every time the button is clicked. I tried using ReactDOM.render however it throws me an error telling me to change the state rather using the DOM.

How would I do this?

I am trying to get the component dynamically rather than setting a specific limit of <p> . Instead of just having an extra <p> I am trying to insert <p> every time the button is click dynamically

end result I am trying to get:

<div> 
   <p> Test </p>
   <p> New Para </p>
   <p> New Para </p>
    ... keep adding <p>New Para</p> on button click
</div>

Answer 1

Is this demo what you want? If yes, please check this answer as accepted :)

Hope this helps, Have a nice day!

 class App extends React.Component { constructor (props) { super(props); this.state = { items: [] }; this.addParagraph = this.addParagraph.bind(this); } addParagraph() { this.setState({ items: [...this.state.items, 'New Para'] }); } render() { return <div> <p>Test</p> {this.state.items.map((item, index) => <p key={'child_' + index}>{item}</p> )} <button onClick={this.addParagraph}>Add paragraph</button> </div> } } ReactDOM.render(<App />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div> 

Answer 2

If I understand correctly, you want to do something like this -

class AddPara extends React.Component {
   state = {
     paragraphText: "New Para"
   };

   addParagraph = () => {
      this.setState({ paragraphText: "Test" });
   }

   return(
      <div>
         <p>{this.state.paragraphText}</p>
         <button onClick={this.addParagraph}>Add New Paragraph</button>
      </div>
   )
}

When you click the button, it will now replace the content inside the paragraph with Test :)

Answer 3

I am guessing you are pretty new to react. That's the case, I would highly encourage you to read the documentation a bit. Now about your issue, You just add a setState in the button click function, and show the new para based on the value change.

state = {
 showTime: 0
}
render () {
// Other code
<div>
   <p> Test </p>
{new Array(this.state.showTime).map(() => <p> New Para </p>)}
</div>

<button onClick={AddPara()}> Add New Paragraph </button>
}

function AddPara (){
   this.setState({showTime: this.state.showTime + 1});
}

Answer 4

From your question, you want to add a new paragraph on button click.

To do this you need to map over an array in your state to render each item in the array.

When you want to add a new paragraph, simply, add the new paragraph to the current state.

class App extends Component {
  state = {
    paragraphs: ["hello world"]
  };

  addParagraph = () => {
    this.setState({
      paragraphs: [...this.state.paragraphs, "new paragraph"]
    });
  };

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        {this.state.paragraphs.map(paragraph => (
          <p>{paragraph}</p>
        ))}
        <button onClick={this.addParagraph}>Add Paragraph</button>
      </div>
    );
  }
}

Here is a Codesandbox Example

It should be noted though, that you can use the updater function within setState to ensure you do not do multiple calls during the same cycle.

addParagraph = () => {
    this.setState(prevState => ({
      paragraphs: [...prevState.paragraphs, "new paragraph"]
    }));
  };

See setState Api docs for more info.