Lifecycle, state and props

State and how to update

have the control of your components is primordial in any web application, knowing that, we have developed a very simple way to control and update your component state.

You just need to call the setState() method to delete, update or add a new state:

handleKeyPress(){
  setState({
    fooValue: 'foo'
  })
}

In the example above, we are adding or updating the state of fooValue of our component when the handleKeyPress method is called. If the fooValue state is used in the render method of our component, this component will call the render method again, to update the HTML tag or the value that was changed.

Now if you use this.state.fooValue in your component, you will get the new or the updated value of foo. You can also edit more than one state in the setState method, you just need to parse the object: value follow by , in the setState method.

Props, context and children

When you share values between components, we call it props, or if you are parsing a HTML markup by the component declaration, we call it children.

A very simple way to parse props or children for some component is using a state-less component, for example:

const WelcomeMessage = ({userName}, children) => {
  return (
    

      Welcome MR. {userName}
    
  )
}

class MyCompnoent extends NevinhaComponent {
  render() {
    return (
      

        
This component bellow shows a welcome message:

        
      
    );
  }
}

You can also parse a HTML markup for your component and access it using the children paramiter

const WelcomeMessage = ({userName}, children) => {
  return (
    

      

        Welcome MR. {userName}
      

      
These are my children:

      


      {children}
    
  )
}

class MyCompnoent extends NevinhaComponent {
  render() {
    return (
      

        
This component bellow shows a welcome message:

        
          
Github User: clovisdasilvaneto
          
Age: 23
        
      
    );
  }
}

If you needs to have a state and props in your child component, you can use a state-full component, like bellow:

class WelcomeMessage extends NevinhaComponent {
  constructor(props, context){
    super(props, context);

    this.state.someState = 'NevinhaJS';
  }

  render() {
    const {userName} = this.props;
    const {someState} = this.state;

    return (
      

        

          Welcome MR. {userName}
        

        
My state is: {someState}

        
These are my children:

        


        {this.children}
      
    )
  }
}

class MyCompnoent extends NevinhaComponent {
  render() {
    return (
      

        
This component bellow shows a welcome message:

        
          
Github User: clovisdasilvaneto
          
Age: 23
        
      
    );
  }
}

ps: You don't need to call the constructor method to use props or children in your state-full component, but if you call the constructor method to initialize something like a state property, you will need to parse the props and the context as paramiters of your super() call.

Using refs

Some times we want to manipulate some rendered node in our component without needs to select it by using querySelector or some related thing. In NevinhaJs it's possible using the ref attribute:

class MyCompnoent extends NevinhaComponent {
  constructor(props, children){
    super(props, children);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){
    console.log(this.context.github.element);
  }

  render() {
    return (
      

        
Click and get the reference of the span bellow in your browser console

        Gtihub Username: clovisdasilvaneto
      
    );
  }
}

Lifecycle

Lifecycle is one thing that we are working to extend your component controll possibilities. At momment, we just have one lifecycle, wich is componentWillMount and it's called when your component will be attached on the DOM.

We are finishing the following lifecycles:

• ComponentDidMount
• componentWillUnmount
• WillReceiveProps
• WillReceiveAnimation
• AnimationEnd

We are so excited to finish that lifecycles and offer to you a better API to manipulate your animations.

To use a lifecycle is very simple, you just need to create a method with the lifecycle name in your state-full component:

class MyCompnoent extends NevinhaComponent {
  componentWillMount(){
    console.log('The component will mount');
  }

  render() {
    return (
      

        Gtihub Username: clovisdasilvaneto
      
    );
  }
}