Displaying component based on prop value react

Question

I have four components Rectangle, Circle, Triangle, Star. Based on the value that the user gave in props I want to return the component. For example, If the user gave a prop as a Rectangle, I want to display the Rectangle Component. I don't want to use the If-Else statement every time checking for all four conditions. Is there a better option?

Ex: Rectangle Component

import React from "react";

function Rectangle(props) {
  return (
    <div className="term">
      <svg width="400" height="110">
        <rect
          width="300"
          height="100"
          stroke="black"
          stroke-width="3"
        />
      </svg>
    </div>
  );
}

export default Rectangle;

Can anybody please help? Thanks in advance.

If you don't want to use If-Else, you could consider switch... — hangindev.com
– hangindev.com, Commented Jun 19, 2020 at 15:39

trixn · Accepted Answer · 2020-06-19 15:45:52Z

2

Define a static mapping for shape type -> Component. E.g. assuming the shape type is provided in a prop shape:

const Shapes = {
    rectangle: Rectangle,
    circle: Circle,
    triangle: Triangle,
    star: Star,
};

const Shape = ({shape, ...props}) => {
    const ActualShape = Shapes[shape];

    return <ActualShape {...props} />;
};

Example Usage:

<Shape shape="circle" r="10" stroke="red" />
<Shape shape="rectangle" stroke="black" width="300" height="100" />

edited Jun 19, 2020 at 15:45

answered Jun 19, 2020 at 15:40

trixn

16.4k2 gold badges40 silver badges59 bronze badges

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

1 Comment

mamadgi aishwarya Over a year ago

Thank you for replying!Im new to web develpment. Can u please tell me what does those three dots mean?

Collectives™ on Stack Overflow

Displaying component based on prop value react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related