How to access props inside quotes in React JSX?

0 0 1 minute read

Following approaches are there to access props inside quotes in React JSX:

Approach 1: We can put any JS expression inside curly braces as the entire attribute value.
Approach 2: We can use ES6 template literals.

Creating React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure: It will look like the following.

Project Structure

Approach 1: App.js

Javascript

import React, { Component } from "react"; 
  
class App extends Component { 
  render() { 
    return ( 
      <div> 
        <img 
          alt="React Logo"
  
          // Putting js expression inside curly braces 
          src={this.props.image} 
        /> 
      </div> 
    ); 
  } 
} 
  
export default App;

Approach 2: App.js

Javascript

import React, { Component } from "react"; 
  
class App extends Component { 
  render() { 
    return ( 
      <div> 
        <img 
          alt="React Logo"
  
          // Using ES6 template literals 
          src={`${this.props.image}`}  
        /> 
      </div> 
    ); 
  } 
} 
  
export default App;

Note: Make sure to pass the prop value in the <App> component in the index.js file and place any sample picture in the public folder, like here we have used reactLogo.png.

index.js

Javascript

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
  
ReactDOM.render( 
  <React.StrictMode> 
    <App image="reactLogo.png" /> 
  </React.StrictMode>, 
  document.getElementById('root') 
);

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: You will see the reactLogo.png picture on your browser screen.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!