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"
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"
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...