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?

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay