Render multiple components based on a number

Question

I have a component in Reactjs and need to render the component <FaRegStar key="1" size="30px" /> map-based list.stars. I don’t know how I could do that, someone could help me?

const User = () => {

const users = loadUsers();

return (
    <>
        {users.map(list =>
            <Container key={list.id}>
                <ProfileImg src={list.icon} alt="" />
                <ul>
                    <li>
                        <p>{list.name}</p>
                    </li>
                    <li>
                        <FaRegStar key="1" size="30px" />
                    </li>
                </ul>
            </Container>
        )}
    </>
)
}

Example:

If list.Stars is 2 it should render this

<FaRegStar key="1" size="30px" />
<FaRegStar key="1" size="30px" />

In that case two stars would be rendered

Answer 1

The ideal is you pass the props inside Faregstar and pick them up inside the Component

const style = {
        width: this.props.size,
}

return <div style={style}>
        Hello
  </div>