I created the following render props component, through the children prop as function:
export class GenericAbstractLoader extends React.Component<IGenericAbstractLoaderRenderProps, any> {
constructor(props: IGenericAbstractLoaderRenderProps) {
super(props);
}
public render() {
return this.props.isLoading ? (
<div className="generic-abstract-loader-wrapper">
<div className="generic-abstract-loader">
<img src={loader} />
</div>
{this.props.children(this.props)}
</div>
) : (
this.props.children(this.props)
);
}
}
It actually just renders the wrapped component if isLoading is false, or adds a layer of loading if the prop is true.
It works "quite perfectly".
I do call it in this way from another component:
public render() {
return (
<div>
<button onClick={this.justDisable}>JUST SET FALSE TO STATE</button>
<br />
<button onClick={this.enableDisable}>Disable/Enable Elements</button>
<br />
<GenericAbstractLoader customProp="custom prop" isLoading={this.state.shouldDisable}>
{props => <HomeTestForm {...props} />}
</GenericAbstractLoader>
</div>
);
}
As you can see the wrapped component is a simple HomeTestForm which contains just one input text:
export class HomeTestForm extends React.Component<IGenericAbstractLoaderHOCProps, any> {
constructor(props: IGenericAbstractLoaderHOCProps) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Initial Value' };
}
public render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.handleChange} />
</div>
);
}
public handleChange(event: any) {
this.setState({ value: event.target.value });
}
}
My issue is that when I toggle the isLoading prop, the state isn't kept by the wrapped component, so if I change the value of the inner text field, when adding the loading layer, and when removing it, the value is not taken, so the input field is still rendered with the init value.
What's the right way to create persistent wrapped components with render props?
Your component's state is getting reset because React is creating an entirely new component when your loading state changes. You can see these if you add a console.log to the constructor of HomeTestForm. React thinks this is necessary because of the ternary operator in GenericAbstractLoader. If you can restructure the render function in GenericAbstractLoader to something like the example below, you can give React the context it needs to persist the component instance across renders.
render()
return (
<div className={this.props.isLoading ? "generic-abstract-loader-wrapper" : ""}>
{this.props.isLoading && <img src={loader} />}
{this.props.children(this.props)}
</div>
);
}
React's documentation has a brief section about this under Reconciliation. This situation falls under the Elements of Different Types heading.
Also, unrelated to your question, based on your current example you don't need to use a render prop. The render function in GenericAbstractLoader can just render {this.props.children} without the function call and you can place your props directly on the child component as in the example below. You may have just simplified your example for SO and have a situation where you need render props, but I wanted to point this out just in case.
<GenericAbstractLoader isLoading={this.state.shouldDisable}>
<HomeTestForm customProp="custom prop" />
</GenericAbstractLoader
Related
I'm building a webpage and realized a common style shared by each component (same background, border, and title style). So I thought I should make an HOC which accepts the inner content of each component as well as a title, and returns an outer component which wraps this inner component and heading.
At first I ran into a lot of issues trying to get this to work, being new to React, but now it's finally working but I still don't understand how.
Here is my HOC
const BaseBlock = (WrappedComponent) => {
return class BaseBlock extends Component {
render () {
return (
<div className={styles['base-block']}>
<div className={styles['container']}>
<div className={styles['base-block-head']}>
{ this.props.title }
</div>
<div className={styles['base-block-body']}>
<WrappedComponent {...this.props} />
</div>
</div>
</div>
)
}
}
}
export default BaseBlock
This is the WrappedComponent:
const HighlightsBlock = (props) => {
return <ListsComponent items={props.items} />
}
export default BaseBlock(HighlightsBlock)
And this is the ListsComponent
const ListsComponent = (props) => {
if (props.items) {
return (
<ul className={styles['styled-list']}>
{props.items.map((item, idx) => {
return (
<li key={idx} className={styles['styled-list-item']}>{item}</li>
)
})}
</ul>
)
} else return (
<h3>No highlights</h3>
)
}
export default ListsComponent
And this is how I'm using the component in my app:
<HighlightsBlock items={this.getHighlights()} title='Highlights' />
Now, I can see the HighlightsBlock component receiving props twice (Once when I'm using it in my App with props, and once inside the HOC Baseblock as WrappedComponent ). If I remove props from either of these places it stops working. I don't understand how this is working.
When you render <HighlightsBlock items={this.getHighlights()} title='Highlights' /> you are actually rendering the component returned by HOC which in turn renders your actually HighlightsBlock component as <WrappedComponent {...this.props} />
You can think of HighlightsBlock component to be nested two level deep and hence you need to pass on the props to it, firstly as {...this.props} from within HOC and then receive it as props in functional component
This is because of this.getHighlights() in this line,
<HighlightsBlock items={this.getHighlights()} title='Highlights' />
Every time you pass props to child component this function is getting executed.
To solve this issue, maintain a state value in your parent component and set that value in getHighlights function like,
getHighlights(){
//you logic to get data
this.setState({items:data.items}); //considering `data` is object which has `items`
}
Now you can pass items like,
<HighlightsBlock items={this.state.items} title='Highlights' />
I have seen similar questions to this but they are usually talking about a parent accessing a child component's methods or passing in methods through props. My question is on a specific situation, using props.children, and having any child component be able to call a method on the parent that is rendering props.children.
A simplified example of what im trying to achieve:
class WrapperComponent extends React.Component {
constructor(props){
super(props);
this.handleInputChange = this.handleInputChange.bind(this)
}
handleInputChange(e){
console.log("neat, you changed the input")
}
render() {
return (
<form>
{this.props.children}
</form>
)
}
}
And the component that is calling said component and passing in the children as props.
const Component = (props) => {
return(
<WrapperComponent>
<div className="form-group" >
<label>
<div>Text</div>
<input onChange={this.handleInputChange} type={"text"}/>
</label>
</div>
</WrapperComponent>
)
}
The idea is that I can render a component that holds certain logic, and pass in the elements as children for that component to render, but also that the props.children can then call said logic within the wrapper, so I can pass in different children in different use cases, but the handling will always be the same. Is there a way to do this at all?
You can clone your elements and add new props to them using some built-in React goodies:
class WrapperComponent extends React.Component {
constructor(props){
super(props);
this.handleInputChange = this.handleInputChange.bind(this)
}
handleInputChange(e){
console.log("neat, you changed the input")
}
render() {
return (
<form>
{React.Children.map(
this.props.children,
el => React.cloneElement(el, {onInputChange: this.handleInputChange})
)}
</form>
)
}
}
Then (remove WrapperComponent):
const Component = (props) => {
return(
<div className="form-group" >
<label>
<div>Text</div>
<input onChange={props.onInputChange} type={"text"}/>
</label>
</div>
)
}
Then:
ReactDOM.render(
<WrapperComponent><Component /></WrapperComponent>,
document.getElementById('root')
)
Yes, there's a way, but its not straightforward, and you may want to consider a different approach.
In order for a child component to have access to the methods of an arbitrary parent, the parent must override the child's props. This can be done using React.cloneElement in the render() function of the parent. In your example:
class WrapperComponent extends React.Component {
constructor(props){
super(props);
this.handleInputChange = this.handleInputChange.bind(this)
}
handleInputChange(e){
console.log("neat, you changed the input")
}
render() {
return (
<form>
{React.Children.map(this.props.children, child => (
React.cloneElement(child, {handleInputChange: this.handleInputChange}
)}
</form>
)
}
}
Then, you can access the method in the child via this.props.handleInputChange.
I want to use the 'compare' button to toggle the compare state to true or false.
Next I want to pass this compare state to pivot as props.
I am literally using the same code as in the react documentation when looking at the Toggle class. https://facebook.github.io/react/docs/handling-events.html
The only thing I changed is the name isToggleOn to compare.
When looking at the console client side I get following error every time the component renders:
modules.js?hash=5bd264489058b9a37cb27e36f529f99e13f95b78:3941 Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.`
My code is following:
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = { compare: true };
this.handleClick = this.handleClick.bind(this);
}
handleClick(button) {
if (button === 'compare') {
this.setState(prevState => ({
compare: !prevState.compare,
}));
}
}
render() {
return (
<Grid>
<div className="starter-template">
<h1>This is the dashboard page.</h1>
<p className="lead">
Use this document as a way to quickly start any new project.<br />{' '}
All you get is this text and a mostly barebones HTML document.
</p>
</div>
<ButtonToolbar>
<button onClick={this.handleClick('compare')}>
{this.state.compare ? 'AGGREGATE' : 'COMPARE'}
</button>
</ButtonToolbar>
<PivotTable
ready={this.props.isReady}
data={this.props.gapData}
compare={this.state.compare}
/>
</Grid>
);
}
}
export default (DashboardContainer = createContainer(() => {
// Do all your reactive data access in this method.
// Note that this subscription will get cleaned up when your component is unmounted
const handle = Meteor.subscribe('weekly-dashboard');
return {
isReady: handle.ready(),
gapData: WeeklyDashboard.find({}).fetch(),
};
}, Dashboard));
Any advice on how to fix this?
The reason is this line
<button onClick={this.handleClick('compare')}>
This will call the handleClick function while executing render function. You can fix by:
<button onClick={() => this.handleClick('compare')}>
Or
const handleBtnClick = () => this.handleClick('compare');
...
<button onClick={this.handleBtnClick}>
...
I prefer the latter
I recently have begun learning reactjs and I am having a hard time comprehending state and how it's used. I have built two stateless components (boxOne and boxTwo) and I have a property "Move Me" that I would like to pass between the two components on the click of a button (MoveButton). Below is the code to where I reached to before getting stuck
class MoveButton extends React.Component {
render() {
return (
<button className="thebutton">
Click To Move
</button>
);
}
}
class BoxOne extends React.Component {
render() {
return (
<div className="boxOne-container">
{this.props.name}
</div>
);
}
}
class BoxTwo extends React.Component {
render() {
return (
<div className="boxTwo-container">
</div>
);
}
}
function App() {
return (
<div>
<BoxOne name="Move Me" />
<BoxTwo />
<MoveButton />
</div>
);
}
ReactDOM.render(<App />,document.getElementById('container'));
Okay, so here is a codepen with everything working.
Here is the code for future generation in the event codepen dies before S-O (I think you can run it here as well??).
class Box extends React.Component {
render(){
return (
<div>
{this.props.name ? this.props.name : "nothing"}
</div>
);
}
}
class MoveButton extends React.Component {
render(){
return(
<button onClick={this.props.on_click_handler}>
Click Me
</button>
);
}
}
class App extends React.Component {
constructor(props){
super(props);
this.state = {
first_button: true
};
this.on_click_handler = this.on_click_handler.bind(this);
}
on_click_handler(){
this.setState({
first_button: !this.state["first_button"]
});
}
render() {
return (
<div>
<Box name={this.state["first_button"] ? "Move Me": null} />
<Box name={!this.state["first_button"] ? "Move Me": null} />
<MoveButton on_click_handler={this.on_click_handler} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
So, anyways... here's the explanation.
Basically what you want to do is have the higher level component deal with the state. In this case, we're talking about App. Eventually you'll start to learn where state should go, but generally you want it to be at the highest point that makes sense. Basically, in this case since the App component has the thing (the button) that is changing the state of the two Box we want the state there.
I make the actual function that deals with the click inside the App component, and pass it down to the sub component, MoveButton. I do this because the function is changing state in the App component, so it has to be there. I also had to bind the this in the constructor, which is this line: this.on_click_handler = this.on_click_handler.bind(this);. This just makes sure that this is always referencing the correct thing inside that function.
Then in that handler function I change the components state, which causes a re-render. I use the ternary operator to see which instance of Box I should be passing the "Move me" to. I also use the ternary operator in Box itself to either put the name, or "nothing" but you can change that whatever.
Hope that helps.
P.S: You don't need two different component classes for Box. They're the same thing, so just reuse the same component, but make two instances of it. Which is what I did here.
First off I'd strongly suggest to read the entire react documentation: https://facebook.github.io/react/docs/hello-world.html (or at the very least, to start off the whole quick start section, which covers all the basic you need). It covers pretty much all of react (React has quiet a small scope!).
You need to have some kind of state. Currently your class components (MoveButton, BoxOne and BoxTwo) have access to state but don't use it. Your App component defined as function does not have access to any kind of own state.
Your state needs to be in a common parent component, which you can then pass down to child components as props. The child components may be stateless. In your case that would be the App Component, which you could use a class for instead to make react state available, while the other three components you could rewrite to be stateless functions.
Now I don't understand what exactly you want to happen, I'll just assume you want to move the "Move me" text from one Box to the other on clicking the button. Therefore both boxes have the ability to display text, controlled by the parent. Both boxes could have a react prop called 'name', received by the parent (App). The button itself needs to emit an event (callback), defined in the parent and passed down to the button as prop. I'll call that prop 'handleEvent'.
The implementation could look like such:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
function BoxOne(props) {
return (
<div>BoxOne: {props.name}</div>
);
}
function BoxTwo(props) {
return (
<div>BoxTwo: {props.name}</div>
);
}
function MoveButton(props) {
return (
<button onClick={props.handleEvent}>Click to Move</button>
);
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
boxOneName: 'Move me',
boxTwoName: ''
};
this.handleEvent = this.handleEvent.bind(this);
}
handleEvent() {
this.setState({
boxOneName: this.state.boxTwoName,
boxTwoName: this.state.boxOneName
});
}
render() {
return (
<div>
<BoxOne name={this.state.boxOneName}/>
<BoxTwo name={this.state.boxTwoName}/>
<MoveButton handleEvent={this.handleEvent}/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Everything used in the example is adressed within the react quick start guide.
Let me know if anything is still unclear :)!
I'm learning react, and have an application that used to work with static data stored in a javascript object. I am now loading that data via ajax using axios.
This works, and I am currently storing that data in the app's state, then passing it down to the components once the data is loaded, but the way I'm passing the data as a prop to each component doesn't feel right.
How can each component access the parent app's data without passing it as a prop to each component?
Here's my code
class App extends Component {
constructor(props) {
super(props);
this.state = {appData: {}};
}
componentDidMount() {
axios.get('/data/appData.json')
.then((result)=> {
const thisData = result.data;
this.setState({
appData: result.data
});
})
}
componentWillUnmount() {
this.serverRequest.abort();
}
render() {
const theData = this.state.appData;
if (Object.keys(theData).length > 0 && theData.constructor === Object){ //if the object is not empty
return (
<div className="App">
<AppHeader appData={theData} />
<AppMenu appData={theData} />
<MainCarousel appData={theData} />
<HomeDetails appData={theData} />
<Model3D appData={theData} />
<AppMaps appData={theData} />
<AppContact appData={theData} />
</div>
);
} else {
return (
<div className="App"></div>
)
}
}
}
And a component that would use the data looks like:
function AppHeader(props) {
return (
<div className="App-header">
<h2 className="App-title">{props.appData.copy.title}</h2>
<h4 className="App-subtitle">{props.appData.copy.subtitle}</h4>
</div>
);
}
for a function, or
class MainCarousel extends Component {
mixins: [Carousel.ControllerMixin];
constructor(props) {
super(props);
}
render() {
const carouselItems = this.props.appData.carouselItems.map((carouselItem) =>
<AppCarouselItem key={carouselItem.name.toLowerCase()} name={carouselItem.name} image={carouselItem.image} />
);
return (
<div className="App-carousel">
<Carousel autoplay={true} wrapAround={true}>
{carouselItems}
</Carousel>
</div>
);
}
}
for a class.
For your purposes what you are doing is completely acceptable, the only thing I would change is to split out the state into an object for each component. This will stop every component from updating each time you update a single one of them.
Where things get messy is when your child components are updating the parent's state. This is where a library like Flux or Redux comes in handy.
If you are just creating a simple app with static data keep sending state to your component as props.