Insert component with variables into another component - reactjs

Question

I'm attempting to pass a component into another component in react.
The problem I'm getting with different attempts is that some variables in my component are appearing as undefined.
I have a class component like so:
class PleaseUpVote extends Component {
constructor(props) {
super(props)
this.state = { ...INITIAL_STATE };
}
render() {
const { first, last, phone, email, address, address2, city,
zip, headOfHousehold, household, firstHousehold, lastHousehold } = this.state;
return (
<>
<UserHeader />
{/* Page content */}
<Container className="mt--7" fluid>
<Row>
<Col className="order-xl-2 mb-5 mb-xl-0" xl="4">
<Card className="card-profile shadow">
<Row className="justify-content-center">
<Col className="order-lg-2" lg="3">
<div className="card-profile-image">
<a href="#pablo" onClick={e => e.preventDefault()}>
<img
alt="..."
className="rounded-circle"
src={require("assets/img/theme/team-4-800x800.jpg")}
/>
</a>
</div>
</Col>
</Row>
</Container>
</>
)
}
}
In it I have a form that is an input form. The input form should be input if it has not been saved. If it has been saved then it should not be input by default.
My solution was to add the input form as a separate mmethod like so:
const InputForm = () => (
<>
<FormGroup>
<label
className="form-control-label"
htmlFor="input-country"
>
First
</label>
<Input
className="form-control-alternative"
name="firstHousehold"
value={firstHousehold}
onChange={this.onChange}
id="input-firstHousehold"
placeholder="First"
type="text"
/>
</FormGroup>
</>
)
Then just insert this bad boy into PleaseUpVote component like so:
</Col>
<InputForm/>
</Row>
And bam, works like a charm! Right?!... Wrong!
I get that the variables I've placed in input are undefined. How would I be able to achieve this?

Answer 1

The actual idea is, if you want variables or function from parent component to be used in child component, you need to simply pass them from parent component.
<InputForm firstHousehold={firstHousehold} onChange={this.onChange}/>
Of course you need to create onChange function in parent component which handles input change in child component.
Your child component should be,
const InputForm = (props) => (
<>
<FormGroup>
<label
className="form-control-label"
htmlFor="input-country"
>
First
</label>
<Input
className="form-control-alternative"
name="firstHousehold"
value={props.firstHousehold} //access using props
onChange={props.onChange} //access using props
id="input-firstHousehold"
placeholder="First"
type="text"
/>
</FormGroup>
</>
)