How to render react component onClick?

Question

Hello I am trying to render my PostOnWall component I made using an onClick function. The goal that every time someone clicks the button handleClick will render one new component on the screen each time. So if I click the button three times i should see three PostOnWall components rendered on my screen. Please tell me what I am doing wrong.

class Textbox extends Component {
    constructor(props) {
      super(props);
      this.handleClick.bind(this);
      this.state = {
        textArea: "",
        text: "",
        show: false,
        curTime : new Date().toLocaleString(),

      };
    }

    handleChange(event) {
      const myValue = event.target.value;
      this.setState({
        textArea: myValue
      })
      console.log(this.state)
    }

    handleClick= () => {
      this.setState({text:this.state.textArea,
      show: !this.state.show});
      return (
      <div>
          {this.state.show &&   <PostOnWall PostOnWall={this.props.PostOnWall} text={this.state.text} time={this.state.curTime}/>}
        </div>
        );
    }


    showNewPost

      render() {
        return (
        <div>
            <textarea className="Textbox" 
            rows="2" cols="30"
             type = "text" 
             onChange={this.handleChange.bind(this)}
             value={this.state.textArea} >
            </textarea>
              <button className="postbutton" onClick={this.handleClick.bind(this)}>Post</button>
        </div>

        );
    }
  }



export default Textbox;

Returning the component from the onClick handler will do nothing. You need to add the PostOnWall component in the render method. You could create an array in local state and every time you click the button you add a component to that state, then in the render method render that array of components — skellertor
– skellertor, Commented Apr 5, 2020 at 14:33

Carlos Saiz Orteu · Accepted Answer · 2020-04-05 14:38:41Z

1

That should do the trick for you;

import React, { Component } from 'react';

class Textbox extends Component {
  constructor(props) {
    super(props);
    this.handleClick.bind(this);
    this.state = {
      textArea: '',
      text: '',
      show: false,
      curTime: new Date().toLocaleString(),

    };
  }

  handleChange = (event) => {
    const myValue = event.target.value;
    this.setState({
      textArea: myValue
    });
  }

  handleClick= () => {
    this.setState({
      text: this.state.textArea,
      show: !this.state.show
    });
  }

  render() {
    return (
      <div>
        <textarea
          className="Textbox"
          rows="2"
          cols="30"
          type="text"
          onChange={this.handleChange.bind(this)}
          value={this.state.textArea}
        />
        <button
          className="postbutton"
          onClick={this.handleClick}
          type="button"
        >
          Post
        </button>
        {
          this.state.show &&
            <PostOnWall
              PostOnWall={this.props.PostOnWall}
              text={this.state.text}
              time={this.state.curTime}
            />
        }
      </div>

    );
  }
}

You should use the function called on click to change the state only. Then render (or not) the PostOnWall component based on the state value.

answered Apr 5, 2020 at 14:38

Carlos Saiz Orteu

1,8151 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bobby Over a year ago

Ya that was the first solution I came up with but all it does is hide and show the component. I want render a new PostOnWall componenet every time I click the button

Carlos Saiz Orteu Over a year ago

Then just add an array of posts in the state and use a map in the render just like: { posts.map((post) => (<PostOnWall PostOnWall={this.props.PostOnWall} text={this.state.text} time={this.state.curTime} />));

adel · Accepted Answer · 2020-04-05 15:13:25Z

0

you need to add state which increase on click and then render the component depending on how many time the button is clicked. here the codeSandbox for what you are trying to achieve.

answered Apr 5, 2020 at 15:13

adel

3,5051 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to render react component onClick?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related