DEV Community

Cover image for How do you pass a string to a component?
Andreas Riedmüller
Andreas Riedmüller

Posted on

How do you pass a string to a component?

If you think about it, there are five different ways to pass a string to a prop.

<Component label="Hello!" />
<Component label='Hello!' />
<Component label={"Hello!"} />
<Component label={'Hello!'} />
<Component label={`Hello!`} />
Enter fullscreen mode Exit fullscreen mode

I looked through my code and found that I tend to use label="Hello" and label={'Hello!'} and sometimes label={`Hello!`}. I have the feeling that I should commit to one of the five in case it is just a string.

I like label={'Hello!'} as I can more easily change it to label={`Hello ${name}!`} or label={variable}. And also the other way around: If I have label={variable} I double click variable, hit ' and start to write.

What do you think? Does anyone have an opinion on that?

Top comments (1)

Collapse
 
mikkergimenez profile image
mikkergimenez

I like the cleanliness of label="Hello", and label={"Hello!"} when you need it for variable interpolation, but I can see going for consistency, it does bug me for example when there's a mix of single and double quotes in a file.