Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Refactor the Consumers

Posted by Muhammad Ali
Muhammad Ali
6,752 Points

render is not a function?????

I am try Use Context API but having this Strange error. Context/index.js

const AmazonContext = React.createContext();

export class Provider extends Component {

  state = {
    Images: [
      {
       SliderImages:[Slider1,Slider2,Slider3,Slider4,Slider5,Slider6,Slider7]
      },
    ]
  };

  render() {
    return (
      <AmazonContext.Provider value={{
        Images: this.state.Images,
        actions: {

        }
      }}>
        { this.props.children }
      </AmazonContext.Provider>
    );
  }  
}
const Consumer = AmazonContext.Consumer;

export default Consumer;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Provider from './Components/Context';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>

  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Component Trying to comsume Context

import React from 'react'
import Slider from '@farbenmeer/react-spring-slider'
import Consumer from './Context'
import './Slider.css'

function SliderComponent() {
    return (
        <div>
        <Consumer>
            {
                (Context) => {
                    Context.Images.sliderImages.map(slider => {
                        console.log(<img className="Slider_images" alt="" src={slider} />);
                    })
                }

        }
        </Consumer>
        </div>
    );

}
export default SliderComponent;

1 Answer

Ashish Mehra
Ashish Mehra
2,411 Points
Ashish Mehra
Ashish Mehra
2,411 Points 
import React, { Component } from "react";

const AmazonContext = React.createContext();

export class Provider extends Component {
  state = {
    Images: [
      {
        SliderImages: []
      }
    ]
  };

  render() {
    return (
      <AmazonContext.Provider
        value={{
          Images: this.state.Images,
          actions: {}
        }}
      >
        {this.props.children}
      </AmazonContext.Provider>
    );
  }
}

export default Provider;

export const Consumer = AmazonContext.Consumer;

The way you're exporting the Provider and Consumer is causing issue. Export one as default and other one as module.