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.
Share Improve this question asked Apr 26, 2018 at 13:13 RCohenRCohen 2,00210 gold badges27 silver badges45 bronze badges 3-
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'shandleClick(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
Reset to default 2In 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
.