How to add curly brackets in react js?

April 18, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add curly brackets in react js, you can use {'{' + data + '}'}. It will add curly brackets in react js.

Today, I am going to show you, how to add curly brackets in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add curly the following line to the top of your component file.

import React from 'react';

Step 3: Create a Component.

you can use {'{' + data + '}'} and add curly brackets in react js.

<div>
  {/* Using curly braces to include brackets */}
  <p>{'{' + data + '}'}</p>
</div>

Define the add curly brackets example.

The below code is an example of a React. You have to import React and use {'{' + data + '}'} to add curly brackets in react js.

App.js

import React from 'react';

const App = () => {
  const data = 'World';

  return (
    <div>
      {/* Using curly braces to include brackets */}
      <p>{'{' + data + '}'}</p>
    </div>
  );
};

export default App;

In the above code example, I have used the {'{' + data + '}'} and add curly brackets in react js.

Check the output of the above code example.

All the best 👍