Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What do dollar and colon represent in React?

What do colon and dollar given below mean in React?

Example for colon:
<Route path={'/movie/:id'} component={Movie} />

Example for dollar, (its used right before the expression but why):
<Link to={`/movie/${this.state.movies[index].id}`} key={index} className="movieLink">

like image 201
Azan Momin Avatar asked Feb 26 '18 16:02

Azan Momin


1 Answers

$ is not of react. But its ES6 feature called template literals more at Template Literals basic or template literals.

In react, you have Route and Link components in react router module.

Route takes two properties: path and component. When a path matches the path given to the component, it will return the component specified

In your Route, you are saying to match any path which is of movie/anyid which means it navigates to the component specified (here Movie) with the given parameter

Link is used to specify which path to go to. Its just a wrapper of <a> tag and helps in navigating to the specified path and in your current example, its to /movie/1 (assuming this.state.movies[index].id is 1)

like image 192
G_S Avatar answered Sep 28 '22 14:09

G_S