CODEWITHSUNDEEP
react-bootstrap-typeahead
tyddynonn
tyddynonn

Reputation: 43

Set value in react-bootstrap-typeahead

First off, let me admit to being a React newbie...

I want to set the value displayed and selected in this component after the first render (eg from a button)

Here's my test code (with imports etc removed)

$(function () {
    const data = [
        {
        DataID: 1,
        DataType: 'Data1'
        },
        {
            DataID: 2,
            DataType: 'Data2'
        },
        {
            DataID: 3,
            DataType: 'Data3'
        },
        {
            DataID: 4,
            DataType: 'Data4'
        }
    ]

    ReactDOM.render(
        <SelectionsExample
            options={data}
            preset={[data[1]]}
        />,
        document.getElementById('divExampleSelector')
    )
});


function SelectionsExample(props) {
    const [options, setOptions] = useState(props.options);
    const [preset, setPreset] = useState(props.preset);

    function handleSelect(s) {
        console.log((s ? s.DataType : 'Nothing') + ' selected');
    }
    function handlePreset() {
        let s = options[2];
        console.log('Preset', s);
        setPreset([s]);
    }

    return (
        <>
            <Typeahead
            id="selections-example"
            options={options}
            defaultSelected={preset ?? []}
            onChange={(s) => handleSelect(s[0])}
            labelKey="DataType"
            clearButton
                placeholder="Choose a value..."
            />
            <Button
                onClick={handlePreset}
                variant="outline-secondary">Preset </Button>
       </>
    )
}

On first render, all works fine with as expected the second item in my options list shown.

But when I click the 'Preset' button, handlePreset runs but nothing changes in the control. I would have expected the selection to change to value of options[2].

If I change the Typeahead prop 'defaultSelected' to 'selected', then the only item I can select is the one I pass in in the 'preset' prop.

What am I doing wrong?

Upvotes: 2

Views: 6813

Answers (1)

ericgio
ericgio

Reputation: 3509

Using defaultSelected makes the typeahead uncontrolled, and will only display a preset selection when the component mounts. Since you want to be able to change the preset later, you should use selected to make the typeahead controlled:

function SelectionsExample(props) {
  const [selected, setSelected] = useState(props.preset);

  function handleSelect(s) {
    console.log((s[0] ? s[0].DataType : 'Nothing') + ' selected');
    setSelected(s);
  }

  function handlePreset() {
    let s = props.options[2];
    console.log('Preset', s);
    setSelected([s]);
  }

  return (
    <>
      <Typeahead
        clearButton
        id="selections-example"
        labelKey="DataType"
        onChange={handleSelect}
        options={props.options}
        placeholder="Choose a value..."
        selected={selected}
      />
      <button onClick={handlePreset}>
        Preset
      </button>
    </>
  );
}

Working sandbox: https://codesandbox.io/s/heuristic-haze-3vugt

Upvotes: 5

Related Questions