ReactJs How to dynamically render components based on value

Question

I have been asked to solve a problem using any front-end framework ( reactjs in my case ) . Basically there is a form for adding a car and there can be say a type of car like 'SUV','semitruck','racecar' and so on...

In the form there needs to be different components rendered based on the type of car you want to add ( e.g. SUV has 2 inputs , racecar has 5 inputs ) how can i dynamically render these components and get their input values without doing if statements?

So pretty much i want to avoid doing this :

{typeSelection == "SUV" && (
              <SVUInput
                size={sizeInput}
                changeSize={(str) => setSizeInput(str)}
              />
            )}
            {typeSelection == "Bus" && (
              <WeightInput
                Weight={weightInput}
                changeWeight={(str) => setWeightInput(str)}
              />
            )}
            {typeSelection == "Semitruck" && (
              <DimensionInput
                wheels={wheels}
                length={length}
                changeWheels={(n) => setWheels(n)}
                changeLength={(str) => setLength(str)}
              />
            )}

I tried doing this but doesnt work ( im guessing react doesnt re-render here )

  const [dynamicInputs, setDynamicInputs] = React.useState<any>({
    SUV: <SUVInput size={sizeInput} changeSize={(str) => setSizeInput(str)} />,
    bus: <BusInput weight={weightInput} changeSize={(n) => setSizeInput(n)} />,
    semitruck: <SemitruckInput wheels={wheelsInput} changeWheels={(n) => setWheelsInput(n)}
    color={colorInput} changeColor={(n) => setColorInput(n)} />,
  });

Instead the above code although renders the component , the input does not change when i type into it, it remains blank , i assume it doesnt trigger react to re-render the state

So pretty much instead of making many if statements that would slow down the front-end , Im trying to make it dynamic so that it only takes O(1) time to render the correct form inputs.

kind user · Accepted Answer · 2022-11-17 22:41:22Z

2

I pretty like your solution because that's the thing I'm used to do really often. Your issue is about storing the components inside useState, because they are initialized there when component mounts and they just stay in the same state for the whole component lifetime. The solution is pretty simple as well - just move it out of the state so they do react to state and props changes.

https://codesandbox.io/s/frosty-wozniak-xcy2bv?file=/src/App.js:114-536

export default function App() {
  const [size, setSize] = useState(0);
  const [currentComponent] = useState('SUV');
  const components = {
    SUV: <SuvComponent size={size} />,
  };

  return (
    <div className="App">
      <input onChange={(e) => setSize(e.target.value)} />
      {components[currentComponent]}
    </div>
  );
}

answered Nov 17, 2022 at 22:41

kind user

42k8 gold badges69 silver badges78 bronze badges

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

5 Comments

JustDankas Over a year ago

It also works with UseEffect

kind user Over a year ago

@JustDankas Yes, it might work, but this is super hacky and crazy a bit - to update whole object and whole row with component with new data. Moving it out of the state you dont have to worry about that.

JustDankas Over a year ago

Yes i tried your method but typescipt yells at me and i dont know what to do , it says this -----> Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ SUV: Element; bus: Element; }'. No index signature with a parameter of type 'string' was found on type '{ SUV: Element; bus: Element; }'.

kind user Over a year ago

@JustDankas Agreed, typings for such object with different components as values may be tricky. But it's not impossible, you would have to make a type with specified keys ('SUV' etc) and as values - React.FC<SuvProps>. Anyways I think it's a bit out of the scope of this question - please add a new one if needed, Im sure someone will help :)

JustDankas Over a year ago

thank you for all the help , have a good one

JustDankas · Accepted Answer · 2022-11-17 22:56:34Z

0

it works if i implement the UseState method and then have a useEffect to update it like so :

  React.useEffect(() => {
    setDynamicInputs({
      SUV: (
        <SUV size={sizeInput} changeSize={(str) => setSizeInput(str)} />
      ),
      bus: (
        <WeightInput
          Weight={weightInput}
          changeWeight={(str) => setWeightInput(str)}
        />
      ),
    });
  }, [dynamicInputs]);

answered Nov 17, 2022 at 22:56

JustDankas

351 silver badge5 bronze badges

Collectives™ on Stack Overflow

ReactJs How to dynamically render components based on value

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related