Drum machine - react context

JavaScript
1

Hi, I have a problem with react context in this challenge. I’m using create react app, with react version 16.4.1

The ChangeSounds component (that includes a button) is not rendered when inside LocalProvider component, only when it’s outside it. (the console.log string in the Local Provider is returned on the other hand). I should also mention that the entire App is wrapped in a Redux provider (maybe you can’t have Redux and context it the same time?)

This is the code:

myLocalContext.js

import React from 'react';

export const MyLocalContext = React.createContext("set1");

class LocalProvider extends React.Component {
    constructor(props) {
        super(props);

        this.changeSounds = () => {
            this.setState(state => {
                const newSet = state.soundSet === 'set1' ? 'set2' : 'set1';
                return {
                    soundSet: newSet
                };
            });
        };

        this.state = {
            soundSet: 'set1',
            changeSounds: this.changeSounds
        };
    }

    render () {
        return (
            <MyLocalContext.Provider value={this.state}>
            {this.props.childern}
            {console.log("LocalProvider test")}
            </MyLocalContext.Provider>
        );
    }
}

export default LocalProvider;

ChangeSounds.js:

import React, {Component} from 'react';

import { MyLocalContext } from '../context/myLocalContext';

export default () => {
  return (
  <MyLocalContext.Consumer>
    {localeVal => (
       <button onClick={localeVal.changeSounds}>changeSounds</button>
      )}
  </MyLocalContext.Consumer>
  );
};

App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import LocalProvider from './context/myLocalContext';
import ChangeSounds from './components/ChangeSounds';

class App extends Component {
render() {
    return (
      <div>
          <LocalProvider>
              <ChangeSounds />
          </LocalProvider>
 </div>
    )
  }
}
2

Problem solved (not by me) and I learned two very important lessons…check every single char in your code :slight_smile: … The error is in myLocalContext.js, inside the render , inside the console.log, I’ve typed “childern” instead of “children”. (I’ve left the error in the original question… I’ve spent many hours trying to solve the problem, someone else spotted it in less then a minute and showed it to me…So, lesson learned, if you get stuck, ask for someone to take a look at your code.