I have a functional component but I need in class component. So I tried to change this but had some error but I can't find what I'm missing.
import React, { useState } from 'react';
import DateTimeRangePicker from '#wojtekmaj/react-datetimerange-picker';
function App() {
const [value, onChange] = useState([new Date(), new Date()]);
return (
<div>
<DateTimeRangePicker
onChange={onChange}
value={value}
/>
</div>
);
}
export default App
I tried this but it's not working:
import React, { Component } from 'react'
import DateTimeRangePicker from '#wojtekmaj/react-datetimerange-picker';
export default class App extends Component {
constructor(props){
super()
this.state = {
value:new Date()
}
}
render() {
return (
<div>
<DateTimeRangePicker
onChange={() => this.setState({value:new Date()})}
value={this.state.value}
/>
</div>
)
}
}
As explained in npm page, onChange function returns a value. So you could change class component like this:
import React, { Component } from 'react'
import DateTimeRangePicker from '#wojtekmaj/react-datetimerange-picker';
export default class App extends Component {
constructor(props){
super(props)
this.state = {
value:[new Date(), new Date()],
}
}
render() {
return (
<div>
<DateTimeRangePicker
onChange={(value) => this.setState({value:value})}
value={this.state.value}
/>
</div>
)
}
}
Related
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 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.
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={...}>
I'm trying to create a title and a textbox below it using React, ES6, Webpack and Babel. The content of the title changes/re-renders as we type inside the textbox.
There are primarily two files, Header.js and app.js
//app.js
import React from "react";
import ReactDOM from "react-dom";
import Header from "./Header/Header";
export default class App extends React.Component
{
constructor()
{
super();
this.state = ({title: "Welcome"});
}
changeTitle(newtitle)
{
this.setState({title: newtitle});
}
handleChange(e)
{
const input = e.target.value;
this.props.changeTitle(input);
}
render()
{
return(
<div>
<Header changeTitle = {this.changeTitle.bind(this)} title = {this.state.title}/>
<input onChange={this.handleChange.bind(this)} />
</div>
);
}
}
const element = document.getElementById('app');
ReactDOM.render(<App/>,element);
======================================================
//Header.js
import React from "react";
import ReactDOM from "react-dom";
export default class Header extends React.Component
{
render()
{
return(
<div>
<h1>{this.props.title}</h1>
</div>
);
}
}
If I move the handleChange(e) method and <input> tag line from app.js to Header.js then it works fine, but otherwise I get error that "this.props.changeTitle is not a function", which is inside handleChange(e) method.
You don't pass a prop to <App /> called changeTitle when you render it ReactDOM.render(<App/>,element);
It looks like you just want this.changeTitle instead of this.props.changeTitle
Theres no need to pass the function changeTitle() to the <Header/> just have handleChange() call this.setState().
handleChange(e)
{
const input = e.target.value;
this.setState({title: input});
}
render()
{
return(
<div>
<Header title = {this.state.title}/>
<input onChange={this.handleChange.bind(this)} />
</div>
);
}
React will rerender <App/> which in turn will rerender() <Header/>