Christian Kuroki

FULL STACK DEVELOPER, DATABASES GURU IN BUENOS AIRES, ARGENTINA

React: Categorized select component

A select component that allows you to select objects in a parent-child relationship.

Category Selector image

Categories sample data:

  let parents=[ { id: 1, name: "Cats"},
                { id: 2, name: "Characters Mix" },
                { id: 3, name: "Dogs"}
              ];

Items sample data:

  let items=[   { id: 1, name: "Felix", pid: 1}, 
                { id: 2, name: "Garfield", pid: 1},
                { id: 3, name: "Sylvester", pid: 1 },
                { id: 10, name: "Droopy", pid: 3},
                { id: 11, name: "Goofy", pid: 3 },
                { id: 12, name: "Scooby Doo", pid: 3 },
                { id: 13, name: "Snoopy", pid: 3 }
              ];

Component usage

  <CategSelect parents={parents} childs={items}
               setValue={(val) => { this.setValue(val);} }/>

Check the demo.

Get code at github.

Posted March 30, 2017