React props

Basics

We can give provide arguments for components in the form of xml attributes.

class App extends React.Component {
    render() {
        return (
            <div>
                <Header text="Kulendayz Workshop" />
            </div>
        );
    }
}

Provided arguments are stored in "props" object and available inside the component.

class Header extends React.Component {
  render() {
    return (
      <div>
        {this.props.text}
      </div>
    );
  }
}

Argument can be any javascript object.

const someFunction = () => {

}

const someObject = {
    x: 1,
    y: 2
}

class App extends React.Component {
    render() {
        return (
            <div>
                <Header 
                    someText="pero" 
                    someText2={"pero2"}
                    someBool={true} 
                    someBool2
                    someInt={1}
                    someFunction={someFunction}
                    someObject={someObject}
                     />
            </div>
        );
    }
}

class Header extends React.Component {
  render() {
    return (
      <div>
        {this.props.text}
        {this.props.someObject.x}
        {this.props.someBool}
        ...
      </div>
    );
  }
}

Props are read-only.

// Forbidden 
this.props.text = "Pero";

Typescript

We can define the props interface with Typescript. This will provide us autocomplete and type checking. Great!

React.Component<TProps, TState>

interface HeaderProps {
    text: string
}

class Header extends React.Component<HeaderProps, {}> {
  render() {
    return (
      <div>
        {this.props.text}
      </div>
    );
  }
}