How to add items in select dynamically in react?

Question

Could you please tell me How to add items in select dynamically in react ?

I am getting response from server (name , label etc).For example I just mock my response and after two second I fetch that .

In my example I have two select box or drop down .first dropdown have value “one” and “two”(which is given as options in json).

In json there is one more option dependentField it mean the field is dependent on another field (value mentioned is dependent).In my example second field is dependent on first field.

So the value of second select or dropdown field will be ["three", "four"] if first select box or dropdown value id one.

So the value of second select or dropdown field will be ["five", "six"] if first select box or dropdown value id two.

So I need to watch the value of field as mention in hook form

https://react-hook-form.com/get-started

Can we dynamically add options

here is code

https://codesandbox.io/s/stoic-benz-lxb8i

useEffect(() => {
    console.log("====");
    (async () => {
      var a = await FETCH_API();
      console.log("sssss");
      setState(a);
      console.log(a);
    })();
  }, []);


const getForm = () => {
    try {
      return state.map((i, index) => {
        switch (i.type) {
          case "text":
            return (
              <div key={index}>
                <label>{i.label}</label>
                <input type="text" ref={register()} name={i.name} />
              </div>
            );

          case "select":
            if (i.watch) {
              watch(i.name, null);
            }
            return (
              <div key={index}>
                <label>{i.label}</label>
                <select name={i.name} ref={register()}>
                  {i.options.map((i, idx) => {
                    return (
                      <option key={idx} value={i}>
                        {i}
                      </option>
                    );
                  })}
                  /
                </select>
              </div>
            );
          default:
            return <div>ddd</div>;
        }
      });
      return <div>ddd</div>;
    } catch (e) {}
  };

I don’t wan’t want to do any harcoading like

useEffect(()=>{


},[‘first’])

can we watch or add useeffect dynamically to watch change dynamically ?

Any update

I want to know how to attached event dynamically change event — user944513
– user944513, Commented Feb 17, 2020 at 11:54
Hi please see the answer here stackoverflow.com/questions/60265171/…, if it does answer your question please upvote. — Junius L
– Junius L, Commented Feb 17, 2020 at 16:47

kiran kumar · Accepted Answer · 2020-02-17 11:58:57Z

2

this is a simpl two select. Where frist select depend on second

import React,{useState, useEffect} from "react"

const App = () => {

  const [state,setState] = useState({
    option1:["one","two"],
    option2: []
  })

  useEffect(()=> {
    (async () => {
      var a = await FETCH_API();
      console.log("sssss");
      setState({
        ...state,
        option2: a
      });
      console.log(a);
    })();
  },[state.option1])

  return(
    <div>
      <select>
        {
          state.option1.map((i,idx)=>{
            return(
              <option key={idx} value={i}>
              {i}
              </option>
            )
          })
        }

      </select>
      <select>
        {
          state.option2.map((i,idx)=>{
            return(
              <option key={idx} value={i}>
              {i}
              </option>
            )
          })
        }

      </select>
    </div>
  )
}

export default App

answered Feb 17, 2020 at 11:58

kiran kumar

1104 bronze badges

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

2 Comments

user944513 Over a year ago

Not usefull solution

kiran kumar Over a year ago

this is just an example might not work in sandbox because your api fetch server will not rechable throw internet

Collectives™ on Stack Overflow

How to add items in select dynamically in react?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related