search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.68k stars 46.45k forks source link

Bug: Conditional rendering issue when using multiple SVGs as ReactComponents #21942

Closed itsez closed 5 months ago

itsez commented 3 years ago

React version: 16.12.0

Steps To Reproduce

  1. import multiple SVGs as ReactComponents into a component
  2. setup conditional rendering of those components via prop value
  3. render multiple of the component on a page with different prop values
  4. observe the first render of the SVG being repeated

Link to code example: https://gist.github.com/itsez/9f99ae3f1fd156c9c995b494a4148d48

The current behavior

When rendering a component with conditional rendering, that is importing SVGs as ReactComponents, whatever the first iteration of the component selects to render is repeated for all consecutive renders of that component.

The expected behavior

The conditional rendering should update for each iteration of the component based on the property passed in and not repeat the first render for all iterations

shivamnamdeo0101 commented 3 years ago

`

{parseInt(place) === 1 ? (

        ) : parseInt(place) === 2 ? (
            <Second />
        ) : (
            <Third/>
        )}
    </div>

` You just have to use parseInt for type conversion try it

soaple commented 3 years ago

How about checking the type of 'place'?

stale[bot] commented 2 years ago

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

github-actions[bot] commented 5 months ago

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!