I'm new to React JS, so I'm sorry in advance for the question.

I am developing a ponent here () where I have a <div> with text inside. Outside of this <div> there is another text.

I'm looking to find a way to substitute "Replace me!" with "I wanna replace that guy!", when I click on "I wanna replace that guy!".

So far, so good but when I click on "I wanna replace that guy!", the text inside the <div> doesn't change.

The ponent with "Replace me!":

class TextBox extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    content: 'Replace me!'
  };
  this.changeContent = this.changeContent.bind(this);
}

changeContent (newContent) {
  //code to change 'Replace me!' with 'I wanna replace that guy!'
  //when I click 'I wanna replace that guy!'
  this.setState({
    content: newContent
  });
}

render() {
  return (
    <div>
      <div className="content_box">{this.state.content}</div>
      <Content onClick={this.changeContent}></Content>
    </div>
  );
}
}

ReactDOM.render(
  <TextBox />, 
  document.getElementById("root")
);

The ponent with "I wanna replace that guy!":

export class Content extends React.Component {
  constructor(props) {
  super(props);

  this.handleClick = this.handleClick.bind(this);
}

handleClick(e) {
  const content = e.target.value;
  this.props.onClick(content);
}

render() {
  return (
    <div onClick={this.handleClick} value="heeey" className="text_color">
      I wanna replace that guy!
    </div>
  );
}
}

export default Content;

Thank you for the help.

I'm new to React JS, so I'm sorry in advance for the question.

I am developing a ponent here (https://codesandbox.io/s/8pkl8w6xy0) where I have a <div> with text inside. Outside of this <div> there is another text.

I'm looking to find a way to substitute "Replace me!" with "I wanna replace that guy!", when I click on "I wanna replace that guy!".

So far, so good but when I click on "I wanna replace that guy!", the text inside the <div> doesn't change.

The ponent with "Replace me!":

class TextBox extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    content: 'Replace me!'
  };
  this.changeContent = this.changeContent.bind(this);
}

changeContent (newContent) {
  //code to change 'Replace me!' with 'I wanna replace that guy!'
  //when I click 'I wanna replace that guy!'
  this.setState({
    content: newContent
  });
}

render() {
  return (
    <div>
      <div className="content_box">{this.state.content}</div>
      <Content onClick={this.changeContent}></Content>
    </div>
  );
}
}

ReactDOM.render(
  <TextBox />, 
  document.getElementById("root")
);

The ponent with "I wanna replace that guy!":

export class Content extends React.Component {
  constructor(props) {
  super(props);

  this.handleClick = this.handleClick.bind(this);
}

handleClick(e) {
  const content = e.target.value;
  this.props.onClick(content);
}

render() {
  return (
    <div onClick={this.handleClick} value="heeey" className="text_color">
      I wanna replace that guy!
    </div>
  );
}
}

export default Content;

Thank you for the help.

• javascript
• reactjs

• e.target.value is used for getting values from inputs, not the text content of a div (see answers below). Also, it's better not to use 'onClick' as a property name for a child ponent, since it has a specific meaning. Pass it with its name: <Content changeContent={this.changeContent}/>, then in the child's handleClick(e) function : this.props.changeContent(content). – Jayce444 Commented Apr 26, 2018 at 13:28
• 1 Thanks everyone! Different solutions that work perfectly! – RCohen Commented Apr 26, 2018 at 13:43
• Don't forget to mark the correct answer :) – Jayce444 Commented Apr 26, 2018 at 14:39

3 Answers 3

In this code:

handleClick(e) {
  const content = e.target.value;
  this.props.onClick(content);
}

render() {
  return (
    <div onClick={this.handleClick} value="heeey" className="text_color">
      I wanna replace that guy!
    </div>
  );
}

You're not actually passing any value to the handleClick.

You basically want to keep the content of your div in state, and then modify that.

Working example here.

Please try this. https://codesandbox.io/s/kok29jp04o

  handleClick(e) {
    const content = e.target.innerHTML;  //Since it is an element it should be `.innerHTML`
    this.props.onClick(content);
  }

Pass the e.target.innerHTML to the content. e.target.value would've worked if the 'I wanna replace that guy!' is placed inside a text box.

instead of e.target.value, you should use e.target.textContent.