I can't figure out why I can't get data at my parent component.
I have parent component - AddButton , and child component - AddTasktBox. I want to pass title from child to parent.
Probably bad is in AddButton component - because browser is give me error like this:
"TypeError: _this2.props.sendData is not a function"
Just look at submit - input "onClick={this.handleClick}"(bottom) - there's start my code to passing
import React from 'react';
import ReactDOM from 'react-dom';
class AddButton extends React.Component{
constructor(props){
super(props);
this.state = {
isHidden: false,
title: '',
};
}
sendData = (data) => {
console.log(data);
this.setState({
title: data
})
};
toggleHidden = () => {
this.setState({
isHidden: !this.state.isHidden
})
}
render(){
return(
<div>
<div
onClick={this.toggleHidden.bind(this)}
className="addtask__btn">
+
</div>
{this.state.isHidden && <AddTaskBox handleClose={this.toggleHidden.bind(this)} handleClick={this.sendData.bind(this)}/>}
</div>
);
}
}
class AddTaskBox extends React.Component{
constructor(props){
super(props);
this.state = {
title: '',
description: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
handleClick = () => {
this.props.sendData(this.state.title);
}
render(){
return(
<div className="addtask__box" >
<div className="addtask__close" onClick={this.props.handleClose}>X</div>
<form >
<input
type="text"
name="title"
placeholder="Nazwa Czynności"
value={this.state.title}
onChange={this.handleChange}/>
<textarea
name="description"
value={this.state.description}
onChange={this.handleChange}
placeholder="Opis czynności">
</textarea>
<input
className="btn"
type="submit"
value="submit"
onClick={this.handleClick}/>
</form>
</div>
);
}
}
export {AddButton, AddTaskBox};
You aren't passing sendData()
as a prop to AddTaskBox
<AddTaskBox sendData={this.sendData} />