esra-justBI
6/13/2019 - 9:10 AM

Stateless Components from Stateful Componets

Stateful comonent: has state property. Stateless component: does not have state property. Stateful comp passes its state down to a stateless component.

To access a prop: use this.props.name-of-prop

Parent is going to pass a prop to child. So parent is going to render a child! Is the only way for a component to pass props to another component. The component rendered y a different component must be included in an export statement.

Then the parent needs to import the child: import { ComponentName } from './Component'. THen parent cann pass its state to child. In return statement: child instance. Then render components.

A component should never update this.props! A React component should use props to store information that can be changed, but can only be changed by a different component.

A React component should use state to store information that the component itself can change.

To make a child component update its parent's state (pass event handler to stateless child component, child uses to update parents state):

  1. Define a state-changing method on the parent.
  2. The parent must pass this function down to the child. So that child can use it in an event listener.
  3. The child must call the method. Create an event listener.
  4. Create a new function, should take an event object as an argument. Then call the event handler with correct value.
  5. Bind the new function to child.

Child compent updates parent's state, parent passes that state into sibling component. You will have one stateless component display info, and a different display stateless component offer the ability to change that info.

  1. Parent will have to pass the name(state) into Sibling. So that sibling can display it. In parent's render function pass the name to (name={this.state.name})
  2. Child's job = change name. Sibling job = display name.
  3. You ahve passed the name down to as a prop. Now Sibling has to display that prop.
stateful-stateless
content_copyfile_download
export class Child extends React.Component{
  render(){
    return <h1>Hey, my name is {this.props.name}!</h1>;
  }
}

import {Child} from './Child';

class Parent extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: 'Frarthur'};
  }
  render(){
    return <Child name={this.state.name}/>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'));

-- new function that can change this.state.name. Add to Parent class.
  changeName(newName) {
  this.setState({
    name: newName
    
-- changeName should always refer to instance of Parent, even when we pass it to Child.
this.changeName = this.changeName.bind(this);

--inside Parent's render function, add attribute onChange = {this.changeName}
return <Child name={this.state.name} onChange={this.changeName}/>
  });
  
-- inside child before render
  handleChange(e) {
    const name = e.target.value;
    this.props.onChange(name);
  }
  
  -- bind to child
  constructor(props) {
    super(props);
    
    this.handleChange = this.handleChange.bind(this);
  }
  
  
  A stateful component class defines a function that calls this.setState. 

The stateful component passes that function down to a stateless component. 

That stateless component class defines a function that calls the passed-down function, and that can take an event object as an argument. 

The stateless component class uses this new function as an event handler. 

When an event is detected, the parent’s state updates. (A user selects a new dropdown menu item)

The stateful component class passes down its state, distinct from the ability to change its state, to a different stateless component. 

That stateless component class receives the state and displays it.

An instance of the stateful component class is rendered. One stateless child component displays the state, and a different stateless child component displays a way to change the