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.
Related
I have this code for the App :
import React, {Component} from 'react';
import App1 from './App1';
class App extends Component {
render(){
return (
<>
<App1/>
<div>
<h1>Hello</h1>
</div>
</>
);
}
}
export default App;
And this code is for the App1
import React, {Component} from 'react';
class App1 extends Component {
render() {
return (
<>
<button>Hide</button>
</>
);
}
}
export default App1;
I would like when I click on the Button to hide my div which displays "Hello". But I have no idea to do this ?
Could you help me please ?
Thank you very much !
You can hide the div in the parent component i.e (App.js) by using props. So here are the steps you need to follow:
create a function named as handleHide in App component, and pass it as a prop to App1 component.
Define a state named as hide in App component and pass it as a prop in App1 component.
Inside App1 component use the hide prop to change the text of button(it's bonus).
Assign handleHide function passed as prop from App to App1 component's button element's onClick .
Here are the files:
App.js
import React, { Component } from "react";
import App1 from "./App1";
class App extends Component {
state = {
hide: false
};
handleHide = () => {
this.setState({ hide: !this.state.hide });
};
render() {
return (
<>
<App1 handleHide={this.handleHide} hide={this.state.hide} />
<div>{!this.state.hide && <h1>Hello</h1>}</div>
</>
);
}
}
export default App;
And App1.js will be:
import React, { Component } from "react";
class App1 extends Component {
render() {
return (
<>
<button onClick={this.props.handleHide}>
{this.props.hide ? "Show" : "Hide"}
</button>
</>
);
}
}
export default App1;
You can see the full working code here.
Using class component is perfectly fine. You can use functional component to use react hooks it makes your code more readable and less code.
App.js
import React, { useState } from "react";
import App1 from "./App1";
export default function App() {
const [show, setShow] = useState(true);
return (
<>
<App1 setShow={setShow} show={show} />
<div>{show && <h1>Hello</h1>}</div>
</>
);
}
App1.js
import React from "react";
export default function App1({ setShow, show }) {
return (
<>
<button onClick={() => setShow(!show)}>{show ? "Hide" : "Show"}</button>
</>
);
}
You create a state in App.js and pass those state down to App1.js, which look like this
class App extends Component {
constructor(){
super();
this.state = {
hidden: false
};
this.changeHiddenStatus = this.changeHiddenStatus.bind(this)
}
changeHiddenStatus = () => {
this.setState(state => ({
hidden: !state.hidden
}))
}
render(){
return (
<>
<App1 handleClick={this.changeHiddenStatus}/>
<div>
<h1>Hello</h1>
</div>
</>
);
}
}
And then in the App1.js you did this
class App1 extends Component {
render() {
return (
<>
<button onClick={props.handleClick}>Hide</button>
</>
);
}
}
These are some basic React stuff, so if you don't get it I suggest you should read the React doc again.
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>
)
}
}
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>
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'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/>