Question 34445 in React native Question posted in
The official React Native documentation can be found here.

Array of colors as props and build multiple nested frames – React native

RainbowFrame component

Help do that, pls.

The RainbowFrame component should receive an array of colors as props and build multiple nested frames, one for each color (in any order). Inside the frames should be the content that is nested in the RainbowFrame tag.

How can implement this component, at least in native JS. Not necessarily in React.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Index.jsx

    import { Box } from "@mui/material";
import RainbowFrame from "../../components/RainbowFrame";

const Rainbow = () => {

  const colors = ['red', 'orange', 'purple', 'blue', 'green', 'gray'];

  return (
    <Box
      id='container'
      sx={{
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <RainbowFrame colors={colors}>
        <b>TEXT</b>
      </RainbowFrame>
    </Box>
  );
}

export default Rainbow;

    RainbowFrame.jsx

    const RainbowFrame = ({ colors, children }) => {

  let currentContent = null;

  colors.map((color, index) => {
    const content = colors[index - 1] ? currentContent : children;

    return currentContent = <div style={{ border: `5px solid ${color}`, padding: '10px' }}>{content}</div> 
  })

  return currentContent;
}

export default RainbowFrame;

  2. 0

    What I would do is run the .map() on array and make it return the component for each element of the array. Try checking out the mapping with react!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search