# Newbie question for updating the style component

**URL:** <https://forum.codewithmosh.com/t/newbie-question-for-updating-the-style-component/10270>\
**Category:** React Native\
**Created:** [January 27, 2022, 4:58am UTC](https://forum.codewithmosh.com/t/newbie-question-for-updating-the-style-component/10270 "2022-01-27T04:58:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![logicman](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/logicman/32/3101_2.png) [@logicman](https://forum.codewithmosh.com/u/logicman)\
**Post date:** [January 27, 2022, 4:58am UTC](https://forum.codewithmosh.com/t/newbie-question-for-updating-the-style-component/10270/1 "2022-01-27T04:58:23Z")

</div>

Hello,  
In this video ([12- Improving the Welcome Screen | Code with Mosh](https://codewithmosh.com/courses/the-ultimate-react-native-course-part1/lectures/16617554)) at 3:20 he makes the style object into an array and then adds the background-colour property.

I don’t follow this and would like to learn more as to what this means. Can someone point to the right resource online to learn more? I am assuming this is just some JS stuff. Thanks.

---

<div class="post-metadata">

**Author:** ![UniqueNospaceShort](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/uniquenospaceshort/32/1814_2.png) [@UniqueNospaceShort](https://forum.codewithmosh.com/u/UniqueNospaceShort)\
**Post date:** [July 27, 2022, 1:17pm UTC](https://forum.codewithmosh.com/t/newbie-question-for-updating-the-style-component/10270/2 "2022-07-27T13:17:25Z")

</div>

Hi,  
I see this is related to React Native course. I do not code in React Native but there is a saying it is close to React which I know.

From what you say I guess there is a situation where he did style elements inline before moving the style in a separate object. Such thing happened in the React course.

So for instance :

```nohighlight
// In the return statement of the component
<p style={{fontWeight:bold,color:green}}></p>

```

```nohighlight
// In the root of component
const myStyle = {
  fontWeight: bold,
  color: green,
  backgroundColor: dimgray
}

// In the return statement of the component
<p style={myStyle}></p>

```

For short you are passing an object that has CSS properties converted from kebab case (font-weight) to camel case (fontWeight).

In the 1st example you have double curly braces because the 1st set is to pass React/React-Native code, while the 2nd set represents an object.

In the 2nd example we first create an object which is also delimited by curly braces but put in an identifier `myStyle`. So when you want to use an inline style that way you don’t need to double the curly braces. You just have the common set of curly braces for React/RN code.

Regards.