I am having problems in export a Context from a Component.
The component that holds the context is below.
import React, { Component, createContext} from 'react';
export const MyContext = React.createContext('');
export default class ComponentOne extends Component {
....
....
render(){
return(
<MyContext.Provider value={'value1'}>
<div>....</div>
</MyContext.Provider>
)
}
}
The component that wants to import the Context is below
import React, { Component} from 'react'
import { MyContext } from "../ComponentOne/Index.js"
export default class ComponentTwo extends Component{
render(){
console.log(this.props)
return(
<MyContext.Consumer>
</MyContext.Consumer>
)
}
}
The Error I'm getting is
TypeError: render is not a function
Context Provider requires a children.
<MyContext.Provider value={'value1'}>
<ComponentTwo />
</MyContext.Provider>
The context is available to MyContext.Provider children.
In your case, you need to render ComponentTwo within the provider, and as a consumer, read the value provided:
import React from 'react';
import ReactDOM from 'react-dom';
export const MyContext = React.createContext('');
class ComponentTwo extends React.Component {
render() {
return (
<MyContext.Consumer>{value => <div>{value}</div>}</MyContext.Consumer>
);
}
}
class ComponentOne extends React.Component {
render() {
return (
<MyContext.Provider value={'value1'}>
<ComponentTwo />
</MyContext.Provider>
);
}
}
ReactDOM.render(<ComponentOne />, document.getElementById('root'));
The error might be because of not reading the value inside the Context.Consumer.
Reference: Context API.
Related
I want to pass my state value name to another component Context3.js without using props. I have use context api for creating context and through provider I have passed the value.
Now at Context3.js I am trying to consume it but at output screen I am unbale to see my output.
import './App.css';
import Context3 from './Components/Context3';
function App() {
return (
<div className="App">
<Context3/>
</div>
);
}
export default App;
The main component is App.js.
import React, {Component} from 'react';
export const MyContext = React.createContext();
class Context1 extends Component{
state={
name: 'mohammed'
}
render(){
return(
<div>
<MyContext.Provider value={this.state.name}>
</MyContext.Provider>
</div>
)
}
}
export default Context1;
import React, {Component} from 'react';
import { MyContext } from './Context1';
class Context3 extends Component{
render(){
return(
<div>
<MyContext.Consumer>
{
value => <h1> {value} </h1>
}
</MyContext.Consumer>
</div>
)
}
}
export default Context3;
strong text
You need to wrap your children with the ContextProvider (Context1)
import React, {Component} from 'react';
export const MyContext = React.createContext();
class Context1 extends Component{
state={
name: 'mohammed'
}
render(){
return(
<div>
<MyContext.Provider value={this.state.name}>
{this.props.children}
</MyContext.Provider>
</div>
)
}
}
export default Context1;
import './App.css';
import Context1 from './Components/Context1';
import Context3 from './Components/Context3';
function App() {
return (
<div className="App">
<Context1>
<Context3/>
</Context1>
</div>
);
}
export default App;
Let, we have a parent component like this,
import React from 'react';
export default class ParentComp extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='padding'>
{this.props.children}
</div>
);
}
}
Okay, now i want to use this component like this
<ParentComp fillbg="#389457">
content goes here.......
</ParentComp>
What needs to be changed in parent component to apply that background (fillbg)
import React from 'react'
export default const ParentComp = ({children, fillbg}) => (
<div className='padding' style={{backgroundColor: fillbg}}>
{children}
</div>
);
Pass it as prop to your component and use it
import React from 'react';
export default class ParentComp extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='padding' style={{backgroundColor: this.props.fillbg}}>
{this.props.children}
</div>
);
}
}
Pass the fillbg prop like this
<ParentComp fillbg="#389457">
content goes here.......
</ParentComp>
Background
I am trying to pass a function called execute() via props to the componentDidMount() function inside of the ChildComponent. The function should execute in the context of ChildComponent and not within the context of App. For example, I want to be able to call this.props from inside the () => {} of the execute prop, but this.props refers to the props of ChildComponent and not App.
Is this possible?
Example
App.js:
import React from 'react';
import ChildComponent from './ChildComponent';
const App = () => (
<>
<ChildComponent
execute={() => {console.log('Hello, World.');}}
/>
</>
);
export default App;
ChildComponent.js:
import React from 'react';
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.props.execute();
}
render() {
return (
<>
<h1>Hello, World.</h1>
</>
);
}
}
export default ChildComponent;
This violates the react unidirectional data flow principle, but you can solve it this way:
import React from 'react';
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
return this.props.length > 0 ? this.props.execute.bind(this)() : '';
}
render() {
return (
<>
<h1>Hello, World.</h1>
</>
);
}
}
export default ChildComponent;
In the parent component, you will have to change the arrow function to the ordinary function syntax:
import React from 'react';
import ChildComponent from './ChildComponent';
const App = () => (
<>
<ChildComponent
execute={function() {console.log(this.props);}}
/>
</>
);
export default App;
Now, inside the execute scope, this will refer to the ChildComponent instance, so inside the execute function you will be able to access this.props like you would inside the ChildComponent. Hope it helps you.
I am making a new app using new Context API. In MyProvider component I get an error:
undefined Provider.
So friends how I can achieve this MyContext? I created separate .js files and where should I place const MyContext = React.createContext();?
App.js
import React, {Component} from 'react';
import Calsi from './Calsi'
import MyProvider from './MyProvider'
const MyContext = React.createContext();
class App extends Component {
constructor() {
super();
window.MyContext = MyContext;
}
render() {
return (
<MyProvider>
<div>
<Calsi/>
</div>
</MyProvider>
);
}
}
export default App;
Calsi.js
import React, {Component} from 'react';
import Sum from './Sum'
export default class Calsi extends Component{
render() {
return (
<div>
<Sum/>
</div>
);
}
}
Sum.js
import React, {Component} from 'react';
const MyContext = window.MyContext;
export default class Sum extends Component {
render() {
return (
<div>
<MyContext.Consumer>
{(context) => (
<React.Fragment>
<p>a:{context.state.a}</p>
<p>b:{context.state.b}</p>
<p>Sum: {context.state.a + context.state.b}</p>
<button onClick={context.increaseA}>increment a</button>
</React.Fragment>
)}
</MyContext.Consumer>
</div>
)
}
}
Provider.js
import React, {Component} from 'react';
const MyContext = window.MyContext;
export default class MyProvider extends Component {
state = {
a: 0,
b: 20,
}
render() {
return (
<MyContext.Provider value={{
state: this.state,
increaseA: () => this.setState({
a: this.state.a + 1
})
}}>
{this.props.children}
</MyContext.Provider>
)
}
}
I am new in react so how I can do this correctly? Also I am using react 16.3.0 alpha2 version. Thanks for your help.
You have to export your context. Don't attach it to the window object of the browser (window.MyContext = MyContext).
Create a new file and name it MyContext.js.
export const MyContext = React.createContext();
Then import it in your Provider.js:
import { MyContext } from "./MyContext";
...
<MyContext.Provider value={...}>
Could someone point out what's wrong with this piece of code for rendering a component using React. It keeps throwing an error saying "Element type is invalid ... check render method for App" and I can't see the problem.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('container'));
APP
import React from 'react';
import AppActions from '../actions/app-actions';
import Catalog from './app-catalog';
export default class App extends React.Component {
render(){
return (
<div className="container">
<Catalog />
</div>
)
}
}
CATALOG
import React from 'react';
import AppStore from '../stores/app-store';
import CatalogItem from './app-catalog-item';
function getCatalog(){
return {items: AppStore.getCatalog()}
};
class Catalog extends React.Component {
constructor(){
super();
this.state = getCatalog();
}
render(){
let items = this.state.items.map(item => {
return <CatalogItem key={item.id} item={item} />
});
return (
<div className="row">
{items}
</div>
)
}
}
Any help would be much appreciated.
You just need to export default something in Catalog:
export default class Catalog extends React.Component {
...
Otherwise, when you use the import statement nothing will import:
import Catalog from './app-catalog';
Add export to Catalog
export default class Catalog extends React.Component {
}
because now from catalog there is nothing to import, and when you do
import Catalog from './app-catalog';
you will get undefined and undefined is not valid React component, that's why you get error