'React Component's inline style is not working

I created Carousel component, it returns a collection of carousel boxes, before returning it I am applying style property to every returning div, but the style is not working. What should I do to fix it?

If I created another div inside the main div and wrap the content of outer div into inner div, and apply style property to inner div instead to outer div then everything is working.

const Carousel = (props)=>{
 return (
         <Slider {...settings}>
           { props.sectionDetails?
            props.sectionDetails.map(
             (TypeBox)=>{
               return (<div key={TypeBox.id} style={{background: 
                        TypeBox.background_color}}>
                        <h3>{TypeBox.title}</h3>
                        <p>{TypeBox.description}</p>
                      </div>
                      );
             }):"" }
        </Slider>
        );
}

I want only one div and style should work with this, I don't want to create another nested div.

javascript reactjs

Solution 1:^[1]

Inline styles in React is a similar with JSON.

The style element must be writen together with camelCase.
The Value of the style element must be wraped in quotes.

I don't know will it work with you'r code, but try this anyway, this is the right way to call inline style:

style={{backgroundColor: "TypeBox.background_color"}}

Or You can try to wrap Your style into backticks like this:

style={{backgroundColor: `${TypeBox.background_color}`}}

Solution 2:^[2]

The correct solution is style={{ backgroundColor: TypeBox.background_color }}.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	gaspar

'React Component's inline style is not working

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]