Tutorials

ReactJS Tutorial - Basics


ReactJS - props


ReactJS component takes input via props. so if we have anything to pass to component then we will use props to pass it to the component

For example. Lets pass a few values to our Counter component developed in previous section

var Counter=(props)=>{
return(
<div>
<input type="button" value={"+"+props.incrementby}/><br/>
Counter value : {props.countervalue}
</div>
);
}
ReactDOM.render(<Counter incrementby="1" countervalue="1"/>,mountNode);

So we have passed two properties to Counter component. incrementby and countervalue and see how I am reading it in Component.

First Most important point about the props is props can never be changed

For example if you want to change the value props.incrementby in your component counter then you cannot.

 

If you have to change it then you have to re-render the element. That’s why you need the state. When a component have state then as soon as state changes , component re-renders itself.

We will talk about the state in detail next section.

Once you have created a component you can use as many times as you want with diffirent props for example following is valid

var Counter=(props)=>{
return(
<div>
<input type="button" value={"+"+props.incrementby}/><br/>
Counter value : {props.countervalue}
</div>
);
}
class App extends React.Component{
 render()
 {
  return(
  <div>
  <Counter incrementby="1" countervalue="1"/>
  <Counter incrementby="2" countervalue="3"/>
  <Counter incrementby="3" countervalue="5"/>
  </div>
  );
 }
}
ReactDOM.render(<App/>,mountNode);

Just try to run this example in repl https://jscomplete.com/repl

 

Second most important point about props is you cannot access state or elements of any component in other component only way to pass data to a component is props but you can handle event in parent component which is raised by an element in child component

For our example App is parent which is using Counter component and Counter is child component

So event raised by an element in child component can be handled by parent component

 What does that mean ?

Lets talk about our Counter example. We have a button in the counter. The click event generated by button in Counter component can be handled in App component. Lets see how.

var Counter=(props)=>{
return(
<div>
<input type="button" value={"+"+props.incrementby} onClick={props.onIncrementCounter}/><br/>
Counter value : {props.countervalue}
</div>
);
}
class App extends React.Component{
constructor(props){
super(props);
this.incrementCounter=this.incrementCounter.bind(this);
}
incrementCounter()
{
 alert("counter incremented.");
}
 render()
 {
  return(
  <div>
  <Counter incrementby="1" countervalue="1" onIncrementCounter={this.incrementCounter}/>
 
  </div>
  );
 }
}
ReactDOM.render(<App/>,mountNode);

So we have bind onClick event of button in Counter by props.onIncrementCounter and props.onIncrementCounter is a method in parent App component .  I have written this line

this.incrementCounter=this.incrementCounter.bind(this);

to bind this.incrementCounter as event.

When you click the button you will receive the alert that means that increment counter is called.

So now we know that from props we can pass the value and event handlers to component.

Lets move to next section and learn state.



Please Share this page
Views : 39
Like every other website we use cookies. By using our site you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Learn more Got it!