react

React dealing with controlled component input forms

In most case react form will works normally until you wanted to set a value in the input and change while changes / start to input in something,

1
<input value="some value here" type="text" />

and you realised the value does not change no matter how hard you pressed, this is because of the controlled component:

“In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().”

to solve this you will need to change the value state while typing using onChange method:

to solve this you will need to change the value state while typing using onChange method:

1
2
3
4
5
6
7
8
  inputTextChange(e){
        this.setState({
            myInputState: e.target.value
        });
    }
  ...
  ...
  <input onChange={this.handleNewInputValue} value={this.state.myInputState} type="text" />

lets say you have multiple input and want to change the value for each, you can do like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <input onChange={this.handleNewInputValue} name="inputName" value={this.state.myInputState} type="text" />
  ...
  ...

  inputTextChange(e){
        let _stateName = e.target.name, val = e.target.value;
        let _thisItem = this.state.myInputsState;
        _thisItem[_stateName] = val;
        _thisItem = _thisItem;

        this.setState({
            myInputsState: _thisItem
        });
    }

react passing props to this.props.children

Previous article I mentioned about this.props.children and its feature, problem is this.props.children does not not provide a way to pass down the props, so we need a wrapper called React.cloneElement which allows you get this component and return a new component where you can also pass in the props like this:

1
{React.cloneElement(this.props.children, this.props)}

by the way there are more very useful helpers to help you interacting with this.props.children, for example:

1
2
3
4
5
React.children.map(this.props.children,()=>{})

React.Children.forEach(this.props.children, (child, i) => {
  console.log(child + ' at index: ' + i);
})

see all API at React.children

Inline css in modern apps

While modern framework communities are push forward in using inline css, innovated by one of the react developer react-css-in-js.

As Vjeux have presented in his deck the problems that they faced using css while they are working on react projects.
css problems

Since then internet was boomed about working on inline css, thats when the birth of most popular plugins:
Comparison of CSS in JS Libraries for React
One of the coolest feature that inline css offer is the ability to recompute your styles at runtime, and styles does not exists when not required.

where there is a solution, there will be a problem in computer science, using inline css you do not get full features of css, such as hover, pseudo styles, such as :active, :active + sibling etc… thought some plugins already solve this yet another problem using inline css is slower than external css, imaging you when you have 10000 rows in a table and each TD in contains each inline styles then loading of your html will be a problem.

1
2
3
<td style="border:2px solid #ccc; background:#ccc; ...."
....
...

then when you open up your console and now you realised you have hard time debugging it, lots of css on your DOM, and usually we search elements by class name… my conclusion is that I will definitely stay with SASS for a while with some nice name convention concept like SuitCss or BEM

React double scrollbar component

While playing with react, I have built a react component which server as second scrollbar for your overflow divs.
You are free to use the code that I added to github…

https://github.com/maxlibin/react-doublescrollbar

React pass parameter to parent component or call parent function on ES6

sometime you will need to call parents function on react component, the problem in ES6 is that all functions are not bind with this, so you will need to do manually, below is a simple toggle function that you will call from Child component, notice that in order to call the parent’s method, you will have to pass in the function as a property to Child component then trigger from child onClick method, notice that I have bind this to this.props.parentToggle, by default in ES6 react decided not to auto bind this like what usual javascript does, so we have to do it manually.

Read More

What is this.props.children

When I first saw this API, its about to tear my head apart, and now I will share with you about what I have learned on this.props.children
the concept is easy:
Imaging you have Parent component that call child component that works fine,

what if you want to pass in the props to parent and render whatever the props is, yet should show in child and wrap in child div…

so this.props.children works little bit like in Meteor blade or emberjs, now I will put everything together and this is how I would use this.props.children