As a newcomer to the world of React, I keep encountering an unexpected token error related to the ":". Can someone please assist me with understanding the correct syntax for including multiple styles within the Box component provided below? Additionally, how can I create an array of Box components, each styled differently in terms of margin, and then display them on a webpage?
ncaught SyntaxError: /Inline Babel script: Unexpected token, expected "}" (51:73)
const Box = (props) => <div style={"margin-left" : props.spacing, "width" : props.width, "height" : props.height, "background-color" : props.color}></div>
|
^
The Box component accepts various properties such as margin-left (which I'm not sure if it's valid in React). My intention is to use a for loop to populate an array with different Box components, each with a unique margin value, resulting in a row of distinct elements inside a div.
class StoryPage extends React.Component {
render(){
const Box = (props) => <div style={"margin-left" : props.spacing; "width" : props.width; "height" : props.height; "background-color" : props.color;}></div>
const val = 0
const boxArray = []
for(let i = 0; i < 10; i++){
val += 100
boxArray.push(<Box spacing={val} width="100px" height="100px" color="black" />)
}
return(
<div>
{boxArray}
</div>
)
}
}
I hope to see an array of Box elements displayed on the page, but I'm unsure about the correct implementation for achieving this.