How can I access props passed to React.Component

Question

I want to get some props made in the root layer of my react app:

import React from 'react'
import App, { Container } from 'next/app'

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  state = {
    language: "pl"
  };

  render () {
    const { Component, pageProps } = this.props

    return (
      <Container>
        <Component lang={this.state.language} />
      </Container>
    )
  }
}

so every new React.Component created should inherit those props. But I'm not sure how I can get them. Let's say I have another component which is <Nav/>.

Shouldn't I be able to get it via props.lang inside Nav. When I try it says lang undefined.

Answer 1

I'm seeing a couple problems in your code example.

First, props are a property on your component, they should be accessed via this.props.

Here is a basic example of passing props to a child component:

import React, { Component } from 'react';

class App extends Component {
  render() {
    const greeting = 'Welcome to React';

    return (
      <div>
        <Greeting greeting={greeting} />
      </div>
    );
  }
}

class Greeting extends Component {
  render() {
    return <h1>{this.props.greeting}</h1>;
  }
}

export default App;

Using the code sample above, it would seem that your mistake was to use return <h1>{props.greeting}</h1>; instead of return <h1>{this.props.greeting}</h1>;

Second, it would appear that your component setup is a little off. I would expect your component declaration to look something like this:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

In your code sample, there's no constructor function and state doesn't appear to be set as a property of your component.

Answer 2

Inside of the example <Nav/> component, you must specify at least one argument in the component's function if you wish to access this.props. For example:

const Nav = (props) => ( <div> {this.props.lang} </div> )

Hope this helps!

Answer 3

Summary of my comments above:

Did you try props.lang, or, this.props.lang?

Because you need this.props.lang to access the property.

Hrm, just took a quick peek at my own code -- the initial state is set in constructor(props), and is defined like super(); this.state = (somestate);.

Because you need to set the state in the constructor of classes.

Answer 4

I would suggest moving language to the React Context API

So this way you create a context

// context.js
import React from 'react';

export const LangContext = React.createContext('pl');

and provide it inside _app.js

// app.js
import React from 'react';
import App, { Container } from 'next/app';
import { LangContext } from '../context';

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  state = {
    language: 'EN'
  };

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <LangContext.Provider value={this.state.language}>
          <Component {...pageProps} />
        </LangContext.Provider>
      </Container>
    );
  }
}

and whenever you need to access language value you dont need to pass it anymore. It will be available on LangContext. Example usage

// Nav.js
import Link from 'next/link';
import { LangContext } from '../context';

function Nav() {
  return (
    <LangContext.Consumer>
      {lang => {
        return (
          <div className="site-nav">
            <Link href="/">
              <a>index</a>
            </Link>
            <Link href="/about">
              <a>about</a>
            </Link>
            language = {lang}
          </div>
        );
      }}
    </LangContext.Consumer>
  );
}

export default Nav;

This helps to solve the issue of passing lang props to pages and then to some specific components like Nav. Just wrap a component into a <LangContext.Consumer> if you need it.

Example index.js page

// index.js
import Nav from '../components/Nav';

export default () => (
  <div>
    <Nav />
    <hr />
    Welcome to index.js!
  </div>
);

** One note: as far as I see you can only use <SomeContext.Provider> inside _app.js