Как получить сумму трех input'ов?

Question

[Denis_8106]

Как получить и показать сумму трёх инпутов?
Есть главный компонент, в котором собираются 3 инпута (type: range) и компонент Total, в котором нужно вывести сумму значений инпутов. Вот мой набросок:

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

[0xD34F]

Первое, что вам надо сделать, это...

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

Ну а чтобы посчитать сумму, надо знать значения. То есть, значения надо не внутри компонента держать, а снаружи. И передавать внутрь вместе с функцией, которая будет их обновлять. Вот говнокод, например.