CODEWITHSUNDEEP
javascriptreactjs
Davide Lorino
Davide Lorino

Reputation: 915

React - Dynamically Render Select Options

I am trying to make the contents of the second (and all subsequent) dropdowns render based on the selection made in the first dropdown next to 'Category'.

All of the other dropdowns should render dynamically and allow a user to select multiple entries.

Currently, the options in the first dropdown render perfectly, the second dropdown renders fine, but none of the options in the .map() function in createInputs() will render.

https://codesandbox.io/s/cranky-galois-cwlvw?fontsize=14

Upvotes: 1

Views: 483

Answers (1)

Winston Jude
Winston Jude

Reputation: 599

Your map function for q.skills was missing a return. I've updated that portion of code:

      {somejobs &&
        somejobs.map((q, w) => {
          if (q.jobname == category) {
            console.log("Hello world");
            {
              return q.skills.map((x, y) => {  //Return was missing on this line
                console.log(JSON.stringify(x.skillname));
                console.log(JSON.stringify(q.jobname));
                return (
                  <option key={y} value={`${x}`}>
                    {x.skillname}  //You don't need to stringify this
                  </option>
                );
              });
            }
          }
        })}

Upvotes: 1

Related Questions