Note: We can skip wrapping the element with fragments if we have only one element. The above screenshot shows that there is no redundant tag between the div container element, and a fruit button is the first child of the div container. Then when we check the browser element inspection, we should have the following: When you check your browser, the component should now update as follows:Īs shown above, it’s only the first button that’s now having a yellowgreen background color, while others are having a dark background color. This is where the Fragment component comes to play! We can make use of the Fragment component to resolve this issue by replacing the div JSX element with the component as follows: The above code screenshot shows that the button is not the first child of the container element, and the yellowgreen background color is applied to the div tag which should only serve as a root element but is also now the immediate child of the container element. This is a UI bug due to the redundant div tag we introduced to avoid returning multiple elements in the react component.īelow is what our DOM structure looks like on the Chrome element inspect tool: ❌ The output result above is incorrect because only the first sibling (button) should have the green color and not the background of all four siblings (buttons). Then we target the first button in the buttons sibling within the container element and assign it a yellowgreen background color.īelow will be the output of the above code when you visit your browser: Use the following command to create a new react application:įrom the CSS above code, we center the container class using flexbox then we gave all the buttons with fruit class name a dark background color.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |