Как получить и показать сумму трёх инпутов?
Есть главный компонент, в котором собираются 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>
);
}
