How can I make this input clean-CodePudding

I just want to add conditional styling into my input. my current input looks like a mess. basically when activeItem is "Height" i just want to show height value and change with setHeight

const [activeItem, setActiveItem] = useState('Length');
    const [visible, setVisible] = useState(false);
    const [length, setLength] = useState(0);
    const [height, setHeight] = useState(0);
    const [width, setWidth] = useState(0);
    const [weight, setWeight] = useState(0);

<InputModal
                visible={visible}
                value={
                    activeItem === 'Length'
                        ? length
                        : activeItem === 'Height'
                        ? height
                        : activeItem === 'Width'
                        ? width
                        : activeItem === 'Weight'
                        ? weight
                        : ''
                }
                onTextChange={
                    activeItem === 'Length'
                        ? setLength
                        : activeItem === 'Height'
                        ? setHeight
                        : activeItem === 'Width'
                        ? setWidth
                        : activeItem === 'Weight'
                        ? setWeight
                        : ''
                }
                toggle={() => setVisible(!visible)}
                onSubmit={() => setVisible(!visible)}
            />

CodePudding user response：

Try this, it looks better:

const [activeItem, setActiveItem] = useState('Length');
    const [visible, setVisible] = useState(false);
    const [length, setLength] = useState(0);
    const [height, setHeight] = useState(0);
    const [width, setWidth] = useState(0);
    const [weight, setWeight] = useState(0);

const items = {
  'Length': length,
  'Height': height,
  'Width': width,
  'Weight': weight
}

<InputModal
  visible={visible}
  value={items[activeValue] ?? ''}
  onTextChange={
     ...same logic
  }
  toggle={() => setVisible(!visible)}
  onSubmit={() => setVisible(!visible)}
/>

CodePudding user response：

I think you could try to condense the use of useStates up above to be more something along the lines of...

const [activeItem, setActiveItem] = useState('Length')
const [visible, setVisible] = useState(false)
const [dimensions, setDimensions] = useState(
  {
    Length: 0,
    Height: 0,
    Width: 0,
    Weight: 0,
  }
)

<InputModal 
  visible={visbile}
  value={dimensions[activeItem] || ''}
  onTextChange={(value) => {
    setDimensions(
    {
      activeItem: value,
      ...dimensions
    })
  }}
  toggle={() => setVisible(!visible)}
  onSubmit={() => setVisible(!visible)}
/>