kentcdodds / advanced-react-patterns-v2 Goto Github PK

Hello Team,

In codesandbox, the toggle button 'onClick' is expectedly fired on single click where as in my local m/c - which I clone from https://github.com/kentcdodds/advanced-react-patterns-v2.git (tested up to 03.js), it's triggered only on 'double click'. I wonder, what on earth is going on? 😕

Note: I'm using Mac Air (and testing on Chrome) and I don't think it's because of the system otherwise I would expect consistent behavior in codesandbox too.

Thanks,
KSM

I also ran the npm run setup command separately and it get the same error on npm run build.

I followed the instructions on the error message, but no dice.

In step 3, it says remove webpack, but there is no webpack on package.json.
I reran the command with yarn, but got the same error.

The error message also says to add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
Couldn't find any .env file.

Thanks for the help

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "3.10.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /Users/home/node_modules/webpack (version: 4.6.0) 

Manually installing incompatible versions is known to cause hard-to-debug issues.
To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.

  2. Delete node_modules in your project folder.

  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.

  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/home/node_modules/webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

Hey Kent,

Awesome workshop!

I am building a similar component using React.createContext(), but I want use the component in an older project that uses react 16.0.0 and errors on createContext because this was introduced later.

Is there any recommended way to polyfill this?

Thank you!

npm i - is not working, I think it's MacBook M1 problem

Hello Kent. I have studied and love these react patterns however I barely find a use case for most of them them in my daily work with react but recognise them used all over the place in react libraries.
Is there something i need to know to use these more.

Thanks :)

Hello!

I'm currently studying this pattern and I was wondering what could be the utility of having a state reducer prop. In this example we are initializing our on state with initial props and telling the user about state changes using onStateChange prop and not using the state reducer at all. I guess the state reducer could be useful to also manage different pieces of state internally. Thus, having controlled and non-controlled properties at the same time. Is this the utility of the pattern?

Thanks for this very useful course.

The problem appears due to hardcoded EOL separator autofill-feedback-email.js#L41-L42.

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.1.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

C:\Users\Rk\node_modules\babel-loader (version: 8.0.6)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if C:\Users\Rk\node_modules\babel-loader is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

7. Try running npm ls babel-loader in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Rk\AppData\Roaming\npm-cache_logs\2020-08-24T05_54_18_857Z-debug.log

Hey folks! I'd love it if some of you could help me out with this workshop and make sure it's good to go! Please just follow the README instructions and let me know where you get stuck and what could be improved. Each of the exercises should be commented well enough for you to get everything done on your own without instruction.

Let me know if there are typos, legit errors, or anything that's unclear.

One thing I know is that the snapshots are failing on codesandbox. Hopefully I can get those working, but it should be working locally :) Thanks!

On windows, this project ran fine.

However, on my Mac. Following the same steps gives me an error

sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/vedant/.npm/_logs/2018-11-25T05_46_33_446Z-debug.log

I tried

1. rm -rf node-modules && npm install && npm start
2. npm i -D react-scripts && npm start

And it still fails

Here the stacktrace

TypeError: getTogglerProps is not a function. (In 'getTogglerProps({
    on
  })', 'getTogglerProps' is undefined)
(anonymous function)
src/exercises/06.js:50
  47 | return (
  48 |   <Toggle onToggle={onToggle}>
  49 |     {({on, getTogglerProps}) => (
> 50 |       <div>
^ 51 |         <Switch {...getTogglerProps({on})} />
  52 |         <hr />
  53 |         <button

I've cloned the code sandbox as well as this repository to confirm this behavior. After completing the setup and starting the app locally, the pages do not display after hitting refresh in the browser.

node v10.4.0
npm v6.1.0
Linux 4.13.0-45-generic #50~16.04.1-Ubuntu x86_64 GNU/Linux

Replication Steps

1. git clone the project
2. run $ npm run setup --silent
3. Resulted in: Failed to compile
   Module not found: Error: Can't resolve '@babel/runtime/helpers/esm/inheritsLoose' in '{MY-FOLDER}/github.com/kentcdodds/advanced-react-patterns-v2/node_modules/react-router-dom/esm'

I have checked that there is file under ..node_modules/@babel/runtime/helpers/esm/inheritsLoose.js

Specification

1. npm version 6.9.0

Kindly help to advise on how to make it successfully compiled, Thanks !

Hi, thank you for your react patterns video. I hope it's okay to ask questions here.

In your control props videos, I was confused as to why the following didn't work. I modified the Toggle component so that it sets the initial state as the prop that was sent in. I assumed that re-rendering the parent will re-render the children as well. In this case, shouldn't both Toggle components be re-rendered with a fresh set of props?

class Toggle extends React.Component {
  // state = {on: false}
  state = this.props.on
  ...

class Usage extends React.Component {
  state = {bothOn: false}
  
  handleToggle = on => {
    this.setState({bothOn: on})
  }
  render() {
    const {bothOn} = this.state
    const {toggle1Ref, toggle2Ref} = this.props
    return (
      <div>
        <Toggle
          on={bothOn}
          onToggle={this.handleToggle}
          ref={toggle1Ref}
        />
        <Toggle
          on={bothOn}
          onToggle={this.handleToggle}
          ref={toggle2Ref}
        />
      </div>
    )
  }
}

Hello,

I was going through the codesandbox link - https://codesandbox.io/s/github/kentcdodds/advanced-react-patterns-v2 to quickly go through the exercises. I'm in the first exercise and for some reason, the toggle button didn't change its state though I applied the setState appropriately. BTW, the final exercise also exhibited the same behavior. Am I missing anything?

Oh, yes the toggle() looks same as it's there in the final exercise of 01.

Thanks,
KSM

I have a proposed solution that is the following:
In the Toggle Component:

render() {
  return React.Children.map(this.props.children, child => {
    if (typeof child.type === 'function')
      return React.cloneElement(child, {
        on: this.state.on,
        toggle: this.toggle,
      })
    return child
  })
}

In the Usage Component:

return (
  <Toggle onToggle={onToggle}>
    <Toggle.On>The button is on</Toggle.On>
    <Toggle.Off>The button is off</Toggle.Off>
    <Toggle.Button />
    <span>Hello</span>
  </Toggle>
)

Do we still need this toggle function?

https://github.com/kentcdodds/advanced-react-patterns-v2/blob/master/src/exercises-final/05.js#L16

Hi Kent,

I'm a big fan of your videos.

While doing the Exercise 6 you made a demonstration of how to dismiss the error screen and continue playing with the Final version of the toggle, but locally (I cloned the repo on my computer) nothing is rendered on my screen.

Debugging the code I've found that the error is indeed being caught in componentDidCatch in the ErrorCatcher component but after setting the error in the state, getDerivedStateFromProps is executed and nulling the state again, causing the component to try to render the children again and breaking the screen.

Removing getDerivedStateFromProps does the job for me, but I don't know how it may affect the rest of the application.

Thanks!

Just a reminder for you to add the extra credit for the scenario in which the consumer of the compound component is required to be able to add their own HTML tags as children.

i.e. being able to do this in the usage section:

  <Toggle onToggle={onToggle}>
      <Toggle.On>The button is on</Toggle.On>
      <Toggle.Off>The button is off</Toggle.Off>
      <Toggle.Button />
      <span>Something</span>
    </Toggle>

😃

I'm following your course on code sandbox and I'm stuck at running tests. They're just not running.

Hi,

When I press the button, it catches an error

https://codesandbox.io/embed/github/kentcdodds/advanced-react-patterns-v2/tree/master/?module=%2Fsrc%2Fexercises-final%2F02.js

Thanks Kent & other contributors for all your efforts. Just wanted to point out security vulnerabilities npm reports as it completes (please note there isn't any issue with the installation):

Here is the summary of npm audit - https://file-eqqipuzafp.now.sh/

Environment Details:
OS: macOS Sierra - 10.12.6
Node: v8.9.1
NPM: v6.0.1

While going through the exercises (which've been amazing!), on exercise 7 I forgot to add the defaultProps, but it still passed the tests, which don't check for that part of the instructions right now.

Hi Kent - I'm having some trouble seeing the optimization discussed in exercise 3 for preventing unnecessary re-renders of the consumers. It could be due to a misunderstanding by me of how those consumers work. To test it out I added a simple counter button that updates the state of the Usage component to trigger a re-render. I also added a console.log within Toggle.Button to check when a rendering happens.

// Flexible Compound Components with context

import React from 'react'
import {Switch} from '../switch'

const ToggleContext = React.createContext();

function ToggleConsumer(props) {
  return (
    <ToggleContext.Consumer>
      {
        (context) => {
          if (!context) {
            throw new Error('Toggle compound components must be rendered within the Toggle component');
          }

          return props.children(context);
        }
      }
    </ToggleContext.Consumer>
  );
}

class Toggle extends React.Component {
  static On = (props) => (
    <ToggleConsumer>
      {({ on }) => on ? props.children : null}
    </ToggleConsumer>
  );
  static Off = (props) => (
    <ToggleConsumer>
      {({ on }) => on ? null : props.children}
    </ToggleConsumer>
  );
  static Button = (props) => {
    return (
      <ToggleConsumer>
        {({ on, toggle }) => {
          console.log('rendering button');

          return <Switch on={on} onClick={toggle} {...props} />
        }}
      </ToggleConsumer>
    );
  }

  toggle = () =>
  this.setState(
    ({on}) => ({on: !on}),
    () => this.props.onToggle(this.state.on),
    )

  state = { on: false, toggle: this.toggle }
  render() {
    // UN-OPTIMIZED
    // return (
    //   <ToggleContext.Provider value={{on: this.state.on, toggle: this.toggle }}>
    //     {this.props.children}
    //   </ToggleContext.Provider>
    // );

    // OPTIMIZED
    return (
      <ToggleContext.Provider value={this.state}>
        {this.props.children}
      </ToggleContext.Provider>
    );
  }
}

class Usage extends React.Component {
  static title = 'Flexible Compound Components';
  state = { count: 0 };

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1}));
  }

  onToggle = (...args) => console.log('onToggle', ...args);

  render() {
    const onToggle = this.props.onToggle || this.onToggle;

    return (
      <React.Fragment>
        <div>{this.state.count}</div>
        <button onClick={this.increment}>+</button>
        <Toggle onToggle={onToggle}>
          <div>
            <Toggle.Button />
          </div>
          <Toggle.On>The button is on</Toggle.On>
          <Toggle.Off>The button is off</Toggle.Off>
        </Toggle>
      </React.Fragment>

    );
  }
}

export {Toggle, Usage as default}

My expectation was that with the optimization of passing this.state I'd no longer see rendering button logged every time I increment my counter. But it still is getting logged. If there is a better forum for this question please let me know!

I stumbled upon something. My code for the HOC matches the code in the video, but the tests still fail. The code in /exercises-final is different and passes the tests. Why? Did the hoistNonReactStatics API change?

My code:

function withToggle(Component) {
  const Wrapper = React.forwardRef((props, ref) => {
    return (
      <Toggle.Consumer>
        {(toggleUtils) => (
          <Component {...props} toggle={toggleUtils} ref={ref} />
        )}
      </Toggle.Consumer>
    );
  });
  Wrapper.displayName = `withToggle(${Component.displayName ||
    Component.name})`;
  hoistNonReactStatics(Wrapper, Component);

  return Wrapper;
}

The code above is the exact same code as in the course (FEM) but the tests are still failing. What's going on?

The code in /exercises-final

function withToggle(Component) {
  function Wrapper(props, ref) {
    return (
      <Toggle.Consumer>
        {(toggleContext) => (
          <Component {...props} toggle={toggleContext} ref={ref} />
        )}
      </Toggle.Consumer>
    );
  }
  Wrapper.displayName = `withToggle(${Component.displayName ||
    Component.name})`;
  return hoistNonReactStatics(React.forwardRef(Wrapper), Component);
}

This is what the tests are saying:

I'm not sure what's up, but the snapshot appears to be failing on codesandbox but passing just fine locally.

https://codesandbox.io/s/github/kentcdodds/advanced-react-patterns-v2/tree/frontend-masters

Unmodified CodeSandbox failing all tests. Looks like React testing library problem.

ReferenceError: afterEach is not defined at evaluate (https://qzxqj5zmwq.codesandbox.io/node_modules/react-testing-library/cleanup-after-each.js:1:101)