Is it possible to pass "this.state" object from child to parent component using function parameters? - node.js

Question

I am quite new to react and working on sending data from child component to parent component by passing function in parent component as a props to child. When I pass string as a function parameter it works fine, but when I pass this.state as a function parameter to parent component it logs empty object.
Here is the code for App.js (Parent) Component
class App extends Component {
onClick = (vals) =>{
console.log(`${"App Components"} ${vals}`)
}
render() {
return (
<div className="App">
<Form fetchValue={(vals) => this.onClick(vals)}>
</Form>
</div>
);
}
}
and here is the function I'm accessing in Form.js (Child) Component as a props whenever "onClickButton" is called
import React, { Component } from 'react'
class Form extends Component {
constructor(props) {
super(props)
this.state = {
user : "Enter User Name",
password: "Enter Your Password",
email: "enter your e-mail"
}
}
onUserValueChnage = (e) => {
this.setState({
user: e.target.value
})
}
onPassValueChnage = (e) => {
this.setState({
password: e.target.value
})
}
onEValueChnage = (e) => {
this.setState({
email: e.target.value
})
}
onClickButton = (e) => {
console.log(this.state)
this.props.on(this.state)
e.preventDefault()
}
render() {
return (
<div>
<form onSubmit={this.onClickButton}>
<input type="text" value={this.state.user} onChange= {this.onUserValueChnage} />
<input type="password" value={this.state.password} onChange={this.onPassValueChnage}/>
<input type="text" value={this.state.email} onChange={this.onEValueChnage}/>
<button>Submit</button>
</form>
</div>
)
}
}
export default Form
I've passed this.state as a parameter to App Component and it logs empty object.
The question I'm trying to ask is, is it possible to pass object as function parameter to parent component?

Answer 1

The issue you're having appears to be as a result of the onClickButton in the child component. You're calling this.props.on. However, the function you're passing in from the parent component's render function is called fetchValue. Instead, in onClickButton in your child component, you should call this.props.fetchValue. I also am performing a spread operation when passing state. It is bad to open up the potential to mutate state directly.
onClickButton = (e) => {
console.log(this.state)
this.props.fetchValue({ ...this.state})
e.preventDefault()
}
Optionally, you can also change your parent component to refer directly to the reference of the function, rather than an anonymous function.
<Form fetchValue={this.onClick} />
Updated Answer:
You'll need to change it to this if you want to see your value. When you do string interpolation and try to print an object, it will output [object, object] because it isn't a string. You'd need to wrap your variable with JSON.stringify(value) if you want it to print the object as a string when doing string interpolation. However, you could also update onClick in your App Component to be something like this, and it should print the object like you're expecting.
onClick = (value) =>{
console.log(value)
}

Answer 2

In your parent:
const onChildClicked = name => console.log(name)
return <Child onClickChild={onChildClicked} />
In Child:
return <div id='hey' onClick={e => props.onChildClicked(e.target)}
Your console should show : hey