React Note2

19 Nov 2019

Reading time ~3 minutes

Binding

class Seat extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isbooked: this.props.Booking
        };

        this.handleClick = this.handleClick.bind(this);
        this.checking = this.checking.bind(this);
    }

    handleClick() {
        if (this.state.isbooked === 'ava') {
            this.setState({isbooked: 'boo'});
        } else if (this.state.isbooked === 'boo') {
            this.setState({isbooked: 'ava'});
        }
        console.log("Pass handleClick");
        console.log(this.state.isbooked);
    }

You have to use this.handleClick = this.handleClick.bind(this);,
because of using props, state and more good way.

Hook

//function way
const [modalShow, setModalShow] = useState(false);

//class way
constructor(props) {
    super(props);
    this.state = {
      modalShow: false
    }
}

This is a way that using state.
Function is called by useState.

Prop-types

We have to check props type.
When Movie wants image but you transfer picture.
This way, someone show you your componenet doesn’t work.
There is module for checking.
npm i prop-types

import PropTypes from 'prop-types';

function Movie({name, image, rating}) {
  return <div className="MovieCom">
    <h2>Movie name : {name}</h2>
    <h3>{rating} / 5.0</h3>
  <img src={image} width="500px" alt={name}></img>
  </div>
}

Movie.propTypes = {
  name: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired
};

Movie.propTypes checks is it a correct props?
and isRequired check values are transfered.
If image: PropTypes.string, this prop is string or undefined.
More information

Functional State

function Sample() {
    let [slide, setSlide] = useState(0);

    // componentDidMount
    useEffect(() => {
        var s = slide;
        var slnum = "slide" + s;
        var current = document.getElementById('currentSlide');
        var change = document.getElementById(slnum);
        current.innerHTML = change.innerHTML;
    }, []);

Functional React component use state this way.
We can use Useref function, too.

Comunication of component

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }
}
handleClick(row, col) {
        this.props.onhandleClick(row,col);
    }

class Parents extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);

    this.state = {
      Seatinfo: []
    }

    ...

  render() {
    return (
      ...
      <Seateach key={10*(current.Row-1)+current.Col-1}
                onhandleClick={this.handleClick.bind(this, current.Row, current.Col)}
                Seat={current}
                Row={current.Row}
                Col={current.Col}/>
      ...
    )
  }
  }
}

Caution for changing state that is associated child component

    chooseMovie(index) {
        var tmp = this.state;
        if (tmp.tmpSelected.includes(index)) {
            var i = tmp.tmpSelected.indexOf(index);
            tmp.tmpSelected.splice(i,1);
        } else if (tmp.tmpSelected.length < 4) {
            tmp.tmpSelected.push(index);
        } else {
            alert("4개까지 선택 가능합니다.");
        }
        this.setState(tmp);
    }

    confirmMovie() {
      var tmp = [];
      for (var i=0; i<this.state.tmpSelected.length; i++) {
          tmp.push(this.state.tmpSelected[i]);
      }
      this.setState({Selected: tmp, modal: false});
    }

If you use state when you define variable,
It is corresponded state in real time.
So If you Just define state by variable and use(even const),
variable’s value is changed by state automatically.

You can use state only in Parents class,
Because of React that can’t communicate two side.
So make state in parents first and transfer state value and function(setState) to child.
When child class request setState, Parents class call setState.

Re-render child component on Parents state change

constructor(props) {
        super(props);

        this.cancelSelectTheater = this.props.onCancelSelectTheater.bind(this);
        this.confirmTheater = this.props.onConfirmTheater.bind(this);
        this.chooseTheater = this.props.onChooseTheater.bind(this);
        this.showDropdown =this.props.onShowDropdown.bind(this);
        this.state = {
            dropdown: 'initial',
            tmpSelected: []
        }

        this.region = [];
    }

componentWillReceiveProps(nextProps) {
        this.setState({dropdown: nextProps.Dropdown, tmpSelected: nextProps.tmpSelected });
}

Get your props and set it by state.
Then, use componentWillReceiveProps to change the child state on changing parent component.
I said you can use state only in Parents class before,
but that is parents’ state. not child state.
React re-render when state is changed, so you need state in child sometimes.

•

React