How do I set the state of the parent through inputs in the child ? in React?

Question

My problem is the following I am doing an IMC application, and I intend to change only the body of the screen when the result appears, without updating the page . my big problem is that I can’t use inputs made in a Component to change the state of the father which is where this weight the height and age.

Father

import React, { Component } from 'react';
import Inputs from '../../components/home/index.js'
import { Container, Title} from './styles';

export default class Home extends Component {
  state = {
    peso: 0,
    altura: 0,
    idade: 0,
  }

  handleWeight = (e) => {
    this.setState({ peso: e.target.value })
    console.log(this.state)
  }

  handleHeight = (e) => {
    this.setState({ altura: e.target.value })
    console.log(this.state)
  }
  handleAge = (e) => {
    this.setState({ idade: e.target.value })
    console.log(this.state)
  }
  submitResult=()=>{
    
  }
  render() {
    return (
      <Container>
        <Title>Imc Sincero</Title>
        <div>
          <Inputs  SetWeight={this.handleweight} Setheight={this.handleHeight} Setage={this.handleAge} />
        </div>
      </Container>
    )
  }
}

Son :

import React from 'react';

import { Input } from './styles';

export default function Inputs(SetWeight,Setheight,Setage) {
    return (
        <>
        <Input>
            <span>Peso(g):</span>
            <input type="number"   onChange={SetWeight}></input>
        </Input>
        <Input>
            <span>Altura(m)</span>
            <input type="number"  onChange={Setheight}></input>
        </Input>
        <Input>
            <span>Idade</span>
            <input type="number"  onChange={Setage}></input>
        </Input>
        </>
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

From what I’ve seen of your code, you’re sending by props the functions that will alter the state of the parent component. As you put the console.log in each function, I believe the problem is that these functions are not running.

There are two ways to solve the problem, both by changing the child component. See below:

Example 1:

import React from 'react';

import { Input } from './styles';

const Inputs(props) {
    return (
        <>
        <Input>
            <span>Peso(g):</span>
            <input type="number"   onChange={props.SetWeight}></input>
        </Input>
        <Input>
            <span>Altura(m)</span>
            <input type="number"  onChange={props.Setheight}></input>
        </Input>
        <Input>
            <span>Idade</span>
            <input type="number"  onChange={props.Setage}></input>
        </Input>
        </>
  )
}
export Inputs;

Example 2:

import React from 'react';

import { Input } from './styles';
class Inputs extends Component {
  render() {
    return (
     <>
        <Input>
            <span>Peso(g):</span>
            <input type="number"   onChange={this.props.SetWeight}></input>
        </Input>
        <Input>
            <span>Altura(m)</span>
            <input type="number"  onChange={this.props.Setheight}></input>
        </Input>
        <Input>
            <span>Idade</span>
            <input type="number"  onChange={this.props.Setage}></input>
        </Input>
        </>
    )
    );
  }
}
export default Inputs;