Skip to content
Related Articles

Related Articles

Improve Article

How to access props inside quotes in React JSX?

  • Last Updated : 28 Dec, 2020

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :