DEV Community: Dieldore

can't declare url and path variables useRouteMatch in class

Dieldore — Wed, 25 Mar 2020 04:10:42 +0000

Now i do so:

constructor(props) {
    super(props);
    let r = useRouteMatch();
    this.path = r.path;
    this.url = r.url;
}

but this does not work and throws errors: url is not defined, if i use them in render()
This code is indicated in the documentation:

let {path, url} = useRouteMatch();

It works for functional programming, not for class. How to declare these variables in this as one line? Or something

How to change context from a child

Dieldore — Mon, 23 Mar 2020 21:58:50 +0000

Simple code
https://codesandbox.io/s/gracious-jennings-ugqzd
I need to change the value of number from class Two. For some reason, a simple change does not work

Huge problem: code does not go further than await

Dieldore — Mon, 23 Mar 2020 20:39:26 +0000

Code in App.js

componentDidMount() {
    this.getAccountData();
}
async getAccountData() {
    try {
      let FD = new FormData();
      FD.append('test', true);
      let Q = fetch('/ajax/get', {
        method: 'POST',
        body: FD
      });
      let data = await Q.json();
      console.log(data);
      this.setState({
        id: data.id,
        name: data.name
      });
    }
    catch(e) {
      console.log('error');
    };
  }

After await is called, it gets the data in JSON. But if you put console.log after it, then they do not work, so setState also breaks my application. debugger also does not work there.
I am using firefox 68.6 and 80.0.3987.132

variable passed through context does not change in the child when changing in the parent and vice versa

Dieldore — Sun, 22 Mar 2020 10:53:50 +0000

I learned this manual https://reactjs.org/docs/context.html
And wrote this code

UserContext.js:

import React from 'react';
const UserContext = React.createContext();
export default UserContext;

App.js:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      name: ''
    };
  }
  componentDidMount() {
    this.getAccountData();
  }

  async getAccountData() {
    this.setState({
      id: 123,
      name: "Jacob"
    });
  }

  render() {
    return (
      <UserContext.Provider value={this.state}>
          <Account />
      </UserContext.Provider>
    );
  }
}

Account.js:

class Account extends React.Component {
  static contextType = UserContext;

  render() {
    return (
      <UserContext.Consumer>
      {user => (
      <div className="account">
          <p>{user.id} - {user.name}</p>
      </div>
      )}
      </UserContext.Consumer>
    )
  }
}

The user.id variable remains an empty string! I tried to manually change this.context, but this also does not work, it makes a copy as it goes. In addition, there is nothing about this in the documentation.
Any help?