How to dynamically insert a local variable in to a react JSX map function?

Question

I have this component, that inherits a props with a value of string 'A','B','C' depending on what is getting selected at a parent element the point being is the props.options either 'A' or 'B' or 'C' then I want to leverage this incoming props to be able to select a local option list from options array.. depending on what is being passed down instead of passing the whole options arrays from the parent down to child component... I am trying to use template literals but it's not working any local work around so I could render the options array depending on incoming string props? for this particular case.

// incoming props  string of A or  B or  C depending on what is getting seleted at parent element ! 

function OptionAcordingToProps(props) {
 
 const optionsA = ['x', 'x', 'x'];
 const optionsB = ['y', 'y', 'y'];
 const optionsC = ['z', 'z', 'z'];
 
  return (
    <div>
      <form onSubmit={doSmth}>
        <NativeSelect>
             {`options${props.options}`?.map((option) => (
            <option>{option}</option>
          ))}
        </NativeSelect>
        </form>    
       </div>
  );
}

iz_ · Accepted Answer · 2021-09-12 19:48:27Z

3

Use an object as a map:

function OptionAcordingToProps(props) {
 
  const options = {
     A: ['x', 'x', 'x'],
     B: ['y', 'y', 'y'],
     C: ['z', 'z', 'z'],
  };
 
  return (
    <div>
      <form onSubmit={doSmth}>
        <NativeSelect>
             {options[props.options]?.map((option) => (
            <option>{option}</option>
          ))}
        </NativeSelect>
        </form>    
       </div>
  );
}

answered Sep 12, 2021 at 19:48

iz_

16.7k4 gold badges29 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

How to dynamically insert a local variable in to a react JSX map function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related