React State

Giriş
State constructor içinde atanır.

Örnek
this.state {a : b} şeklinde kullanırız. Şöyle yaparız.

class ControlForm extends Component {
  constructor() {
    super();
    this.state = { toggleActive: false, sizeSelect: "0", speed: 1.3, volume: .6};
    ...
  }

Props
Örnek
Dışarıdan state vermek için şöyle yaparız..

class App extends Component {
  state = {
    text: "Hello, How May I Help You Today?"
  }
  ...
  render() {
    return (
      <div>
        <button onClick={this.confirm(A, 10)} />
        ...
        <Barista text={this.state.text} />
      </div>
    )
  }
}

Dışarıdan verilen değerleri state yapmak için props.X şeklinde kullanırız. Şöyle yaparız

class Barista extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text: props.text
    }
  }
  ...
}

Örnek
Elimizde şöyle bir kod olsun.

import React from 'react;
import './App.css';
import './Child/Child';

function App() {
return(
  <div className='App'>
  <Child text={'Text for child #1'}/>
  <Child text={'Text for child #2'}/>
</div>

export default App

Dışarıdan verilen değerleri kullanmak için şöyle yaparız.

import React from 'react';
import './Child.css';


function Child(props) {
   return (
     <div className='h4content'>
       <h4>{props.text}</h4>
     </div>
  )
}

export default Child