How to display const in react 2024

by

This blog teaches how to display const in react, the constant values in React apps. React uses components, which are pretty much JavaScript functions. Making a constant and showing it in an HTML tag is an important job for developers in React.

Using “{ } ” you can display your dynamic value.

In line 6 to 10 we have create firstName, lastName, title property which below to userData Constant.

Now to use this userData Constant value you need export it.

In line 15 and 17 using “{ } ” the parenthesis try to display the value in it. 

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

export const userData = {
  firstName: 'Harshida', 
  lastName: 'Parmar',
  title: 'Trainer',
};
function App() {  
  return (
    <div>
       <h2>
          {userData.firstName}{userData.lastName}
      </h2>
      <p>TODO: {userData.title}</p>    
    </div>
  );
}
export default App

Output

How to Use the Import Keyword in React to Load Images

Here in my above code the img folder is place inside the src folder and App.jsx is already in the src folder, you do not need to include src again in your path. simple write “.img/Header.png”

This make sure, when you build the project, webpack will shift the photos to the build folder and it will give you the right paths.

How to pass value to the component in React

Using props you can easily perform this task.

Here in my T1 component I am passing the value as attributes. For me the attributes name is “fName, sType, myImg”.

And in my T1 component the “props” will work as parameter which will received the value in key value pair.

The value which is received by “props” are display in the line number 15 and 16.

Other Post

  1. React Getting Started | Create my own React app in 2024

Youtube Video Link

  1. How to import image in react Hindi

Leave a Comment