React - semantic ui dropdown with object

Question

I'm mapping over an array of objects and using the name in dropdown selection w/ semantic-ui-react.

I have some mock data

mock.onGet("/dataschemas").reply(200, {
  data: [
    {
      id: "2147483599",
      selfUri: "/dataschemas/2147483599",
      name: "Book Catalog"
    },
    {
      id: "2147483600",
      selfUri: "/dataschemas/2147483600",
      name: "Business Articles"
    }
  ]
});

in cDM I'm updating state with the object as dataschemas

  async componentDidMount() {
    await this.getSchemas();
  }

  getSchemas = async () => {
    try {
      const { data } = await axios.get("/dataschemas");
      console.log(data);
      const dataschemas = data.data;

      this.setState({ dataschemas: dataschemas });

      console.log("This is the dataschema list:", dataschemas);
    } catch (error) {
      console.error(Error(`Error fetching results list: ${error.message}`));
    }
  };

My change handler function looks like this:

handleSchemaChange = (e, { value }) => this.setState({ name: value });

Then in render I'm using the <Dropdown> component

render() {
    const { dataschemas } = this.state;
    return (
      <div>
        <div>
          <label>Select a dataschema: </label>
          <Dropdown
            placeholder="Select data schema"
            clearable
            fluid
            selection
            multiple={true}
            options={dataschemas}
            header="PLEASE SELECT A DATASCHEMA"
            value={dataschemas.filter(({ name }) => name === this.state.name)}
            onChange={this.handleSchemaChange}
          />
        </div>
      </div>
    );
  }

I can't get the dataschema names to show in the dropdown or get label to update when a selection is made. I don't know if I'm missing a prop or not updating the state correctly, any ideas?

Codesandbox here

Michel Calheiros · Accepted Answer · 2019-03-14 21:13:07Z

6

As specified in https://react.semantic-ui.com/modules/dropdown/ you should use the following structure to display an object inside a Dropdown.

{
  "key": "",
  "text": "",
  "value": ""
}

Example: use this as options value in your Dropdown

options={dataschemas.map(ds => {
              return {
                  key: ds.id,
                  text: ds.name,
                  value: ds.selfUri
              }
            })}

answered Mar 14, 2019 at 21:13

Michel Calheiros

9715 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DJ2 Over a year ago

Ah I missed that. Any idea how to update state after the selection is made?

DJ2 Over a year ago

Just needed to make the value value:ds.name to get the updated name in state.

KMC Over a year ago

I know you answered this question a year ago but what's the difference between value and text?

Michel Calheiros Over a year ago

@KMC I think that text means the text to be displayed and value the actual form value that will be sent via http in a form for the dropdown. I suggest you to check the code, the project is open-source.

Collectives™ on Stack Overflow

React - semantic ui dropdown with object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related