How to get the sum of three inputs?

Question

React

How to get and show the sum of three inputs?
There is a main component in which 3 inputs are collected (type: range) and a Total component in which you need to display the sum of the values ​​of the inputs. Here is my sketch:

Main.js

export default function Main() {
 <div className='ranges df'>
   <RangeInput
      id={'height'}
      min={50}
      max={220}
      label={'height (sm)'}
      lng={'lng-height'}
   />
   <RangeInput
        id={'weight'}
        min={1}
        max={200}
        label={'weight (kg)'}
        lng={'lng-weight'}
   />
  <RangeInput
        id={'age'}
        min={1}
        max={110}
        label={'age'}
        lng={'lng-age'}
   />
  <Total />
 </div>
}

RangeInput.js

export default function RangeInput({ id, max, min, label, lng }) {
  const [state, setState] = useState(Math.floor((max + min) / 2));
  return (
           <div className='range'>
    <div className={
       state !== Math.floor((max + min) / 2) ? 'output changed' : 'output'
    }>
     {state}
     </div>
     <input
       id={id}
       type='range'
       min={min}
       max={max}
       step='1'
       defaultValue='50%'
       onChange={(event) => setState(event.target.value)}
     />
     <h4 className={lng}>{label}</h4>
        </div>
  );
}

Answer 1

The first thing you need to do is...

...встать перед кирпичной стеной, разбежаться, стукнуться об стену лбом. А потом ещё раз. И ещё. И так до тех пор, пока вот эта дурь про складывание сантиметров с килограммами и годами не окажется из вашей головы выбита.

Well, to calculate the amount, you need to know the values. That is, the values ​​should not be kept inside the component, but outside. And pass it inside along with a function that will update them. Here is the govnokod, for example .