Develop Reference

Unable to use data from chlid component to parent component?

I've made this react app in which there's a Parent component as App.js and it has three child components.The first child component has some states which are being changed by the other two child components present in parent component.
So first I'm passing the states in parent component and then passing them into other two child components as props. Here's the piece of my code.
Here's my App.js
function App() {
var firstvalueoftextarea,
setfirstvalueoftextarea,
secondvalueoftextarea,
setsecondvalueoftextarea;
var PanelOfResult = function(
firstvalueoftextarea,
setfirstvalueoftextarea,
secondvalueoftextarea,
setsecondvalueoftextarea
) {
firstvalueoftextarea = firstvalueoftextarea;
setfirstvalueoftextarea = setfirstvalueoftextarea;
secondvalueoftextarea = secondvalueoftextarea;
setsecondvalueoftextarea = setsecondvalueoftextarea;
};
return (
console.log("Rendering of component"),
(
<div className="App">
<ResultPanel PanelOfResult={PanelOfResult} />
<SecondChildComponent
valueoftextarea={firstvalueoftextarea}
setvalueoftextarea={setfirstvalueoftextarea}
/>
<ThirdChildComponent
className="Symbols"
firstvalueoftextarea={firstvalueoftextarea}
setfirstvalueoftextarea={setfirstvalueoftextarea}
secondvalueoftextarea={secondvalueoftextarea}
setsecondvalueoftextarea={setsecondvalueoftextarea}
/>
</div>
)
);
}
export default App;
Here's my ResultPanel.js
import React from "react";
function ResultPanel(props) {
const [firstvalueoftextarea, setfirstvalueoftextarea] = React.useState(
"Hello World"
);
const [secondvalueoftextarea, setsecondvalueoftextarea] = React.useState("");
props.PanelOfResult(
firstvalueoftextarea,
setfirstvalueoftextarea,
secondvalueoftextarea,
setsecondvalueoftextarea
);
return (
<div>
<h1>{firstvalueoftextarea}</h1>
</div>
);
}
export default ResultPanel;
The states of the ResultPanel Component can be changed by SecondChildComponent and ThirdChildComponent and those component code is working fine.
When SecondChildComponent tries to change the state of ResultPanel I'm getting the error- TypeError: this.props.setvalueoftextarea is not a function
Can anyone help where I'm mistaking? I'm not certain where to call PanelOfResult callback method in ResultPanel component.

There's a lot of issues here, one of the biggest being how you set your variables for state.
First, move your state declarations to the parent component, and delete your vars. The whole PanelOfResult is unnecessary and a bad pattern of doing things.
function App() {
const [firstvalueoftextarea, setfirstvalueoftextarea] = React.useState(
"Hello World"
);
const [secondvalueoftextarea, setsecondvalueoftextarea] = React.useState("");
Then, instead of passing the callback, pass the needed values:
<ResultPanel firstvalueoftextarea={firstvalueoftextarea} />
This will stop your error about not being a function, and eliminate the need for a callback.
In general you should try not to use var, but let or const.
Also, try naming variables better. Either camel case or underscore would make your code much more readable.

Modifying state in parent component with prevState in React

I currently have a Main.js file which contains a 'global' state. However, to modify that state that means I am placing all of my functions in Main.js to update state. Of course this means that the Main.js file is getting too large.
I am working on implementing some code splitting using React.lazy. However, I not sure how to move these functions to the children components to be able to update the global state.
The state is complex implementing various levels of nested objects and/or arrays. Because of this I need to use prevState and the spread operator to be able to modify and/or populate a deeply nested object.
How can I properly access prevState in child components to be able to safely update deeply nested objects in state?
An example of my code currently in Main.js might look like this:
updateObject = (objectA3, newProp1, newProp2) = {
this.setState(prevState => {
//some code here
return ({
objectA: {
...prevState.objectA
[objectA3]: {
...prevState.objectA[objectA3]
newProp1: "some value",
newProp2: "some other value"
}
}
})
}
}
So because of the complex nature of the state I am updating, what approach can I take so that I can move these functions to the proper child component so that I can update state in the main component.
I have come across something like this link that looks promising using a generic function in the Main.js component. However, I cannot wrap my head around how to implement such a mechanism for complex states.

Rather than trying to pass state up and down the component hierarchy, I'd recommend moving your state out to a store, and letting the components that need to get or set state talk to the store. Redux implements this sort of pattern, but there are many ways to do this. One approach could use a higher order component that provides state getters and setters via props.
Here's a relatively dumb proof-of-concept demo of a store with a connect method:
class Store {
connect(Component) {
return () => <Component store={this} />
}
get foo () {
return 'this is foo from the store';
}
}
const store = new Store();
function SomeComponent (props) {
return (
<div>SomeComponent: Foo: {props.store.foo}</div>
)
}
const Connected = store.connect(SomeComponent);
function App () {
return (
<Connected />
);
}
ReactDOM.render(<App />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

If the main concern is to avoid over-bloating your Parent component with event-handlers, what you can do is create a folder for all the utility functions you want to have for that component tree. That will let you freely bring in the necessary functions for whatever logical pattern you need to follow.
Consider a scenario like this:
You have a Main component which holds state and renders children:
import React from "react";
import Child from "./Child";
import { handleChange } from "./utils/inputHandlers.js";
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
this.handleChange = this.handleChange.bind(this);
}
handleChange = handleChange;
componentDidMount() {
const data = [
{ id: 1, text: "test1" },
{ id: 2, text: "test2" },
{ id: 3, text: "test3" }
];
this.setState({
data: data
});
}
createChildren = () => {
const { data } = this.state;
return data.map(item => {
return <Child {...item} handleChange={this.handleChange} />;
});
};
render() {
return <div>{this.createChildren()}</div>;
}
}
In the Main component, we brought in a utility function, created a local method in our component and set it equal to that utility function. Then, we bound the this keyword from that same handleChange function to our component's execution context.
That step is integral for updating state because we need the this keyword to refer to our component. There's no way for the Child-component to just have an event-handler that can update Parent state, without the handler first existing in the Parent.
Now take a look at our utility function:
export const handleChange = function(e, id) {
const dataCopy = [...this.state.data];
const itemToUpdate = dataCopy.find(item => item.id == id);
itemToUpdate.text = e.target.value;
this.setState(prevState => {
return {
...prevState,
data: dataCopy
};
});
};
It looks just like a traditional event-handler, except its outside a component. Pretty cool stuff. The this keyword will now refer to whatever component you bounded this function to.
Lastly, you have your Child component, in which you passed down the handleChange method as prop, so that it can update the state belonging to the Parent component.
import React from "react";
class Child extends React.Component {
render() {
const { id, text, handleChange } = this.props;
return (
<div>
<input value={text} onChange={e => handleChange(e, id)} />
</div>
);
}
}
export default Child;
See working sandbox: https://codesandbox.io/s/lucid-voice-yecnn

Use ref in Higher Order Components

I have a Table component that I want ref to be attached to.
Use: Table.js
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
this.tableRef = React.createRef();
}
componentDidUpdate() {
//using ref
this.tableRef.current ..... //logic using ref
this.state.rows ..... //some logic
}
render() {
<TableContainer ref={this.tableRef} />
<CustomPagination />
}
}
This works fine, but now my requirement has changed, and I want to reuse the Table component with pagination applied to all the Tables in my App. I have decided to make a HOC withCustomPagination.
Use: withCustomPagination.js HOC
import CustomPagination from 'path/to/file';
const withCustomPagination = tableRef => Component => {
return class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
tableRef.current.state ..... //logic using ref, Error for this line
this.state.rows ..... //some logic
}
render() {
return (
<Component {...state} />
<CustomPagination />
)
}
}
}
export default withCustomPagination;
New Table.js:
import withCustomPagination from '/path/to/file';
const ref = React.createRef();
const Table = props => (
<TableContainer ref={ref} />
);
const WrappedTable = withCustomPagination(ref)(Table);
HOC withCustomPagination returns a class WithCustomPagination that has a componentDidUpdate lifecycle method that uses Table ref in the logic. So I try to pass ref created in Table.js as argument to withCustomPagination, i.e curried with ref and Table stateless component.
This use of ref is wrong and I get error: TypeError: Cannot read property 'state' of null.
I tried using Forwarding Refs, but was unable to implement it.
How do I pass the Table ref to withCustomPagination and be able to use it in HOC?

In this case you can use useImperativeHandle
It means you have to forward ref and specify which function or object or,...
you want to share with ref inside your functional component.
Here is my Hoc example :
import React from 'react';
import { View } from 'react-native';
export function CommonHoc(WrappedComponent) {
const component = class extends React.Component {
componentDidMount() {
this.refs.myComponent.showAlert();
}
render() {
return (
<>
<WrappedComponent
ref='myComponent'
{...this.state}
{...this.props}
/>
</>
);
}
};
return component;
}
and it's my stateless component
const HomeController=(props,ref)=> {
useImperativeHandle(ref, () => ({
showAlert() {
alert("called");
},
}));
return (
<Text>home</Text>
);
};
export default CommonHoc(forwardRef(HomeController));

Either restructure your code to not use a HOC for this or try using React.forwardRef:
Refs Aren’t Passed Through
While the convention for higher-order components is to pass through
all props to the wrapped component, this does not work for refs.
That’s because ref is not really a prop — like key, it’s handled
specially by React. If you add a ref to an element whose component is
the result of a HOC, the ref refers to an instance of the outermost
container component, not the wrapped component.
The solution for this problem is to use the React.forwardRef API
(introduced with React 16.3). Learn more about it in the forwarding
refs section.
via Higher-Order Components: Refs Aren’t Passed Through
In the forwarding refs section there are code examples you could use to pass refs down, but trying to yank them up will fail in your case with:
Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
In a project we took a different approach. There's an EnhancedTable component that handles all of the pagination logic and in itself has the dumb table component and the pagination component. It works pretty well but this means you would have to drill props (or use a store lib like Redux or Mobx) and add new ones that will handle pagination options. This will result in some refactoring of Table uses and you'll have to be more explicit but I would take it as a boon rather than a hindrance.

I was able to solve a simmilar issue that brought me to this thread without using forwardRef or useImperativeHandle.
By creating the ref at a higher level, and passign it down into the component and sub components that I needed to act on with the ref.
/** Parent Component has access to ref and functions that act on ref **/
import { useRef } from 'react';
const formRef = useRef(); // ref will have dom elements need accessing
const onClickFunction=()=>{ //sample function acts on ref
var inputs = formRef.current.querySelectorAll('input')
/* Act on ref here via onClick function, etc has access to dom elements
in child component and childs child components */
};
return(
<ComponentGetsAttachedRef formRef={formRef} />
//^ref sent down to component and its children
<ComponentNeedingRef onClickFunction={onClickFunction}/>
//^function with access to ref sent down to component
)
/** Child component needs to act on ref**/
export const ComponentNeedingRef = ({ onClickFunction}) =>{
return(
<button onClick={onClickFunction}>
)
}
/* Child component recieves ref and passes it down */
export const ComponentGetsAttachedRef = ({ formRef}) =>{
//ref comes in as prop gets attached to props or utilized internally
return (
<ChildsChildComponent formRef={formRef}/> //sub component passed ref down
)
}

React inline functions rerender issue

I have a component that uses two nested components that are based on render prop pattern. I need to combine props from both of them to be sent to the innermost function.
<Component1>
{(...props1) => (
<Component2>
{(...props2) => <MyComponent {...props1} {...props2} />}
</Component2>
)}
</Component1>
Now, I wanted to refactor the above inline functions into class functions, so as to avoid creating new functions on every render.
First attempt:
render() {
return <Component1>{this._render1}</Component1>;
}
_render1 = (...props1) => <Component2>{this._render2}</Component2>;
_render2 = (...props2) => <MyComponent {...props1} {...props2} />;
But now, in render2, I don't have access to props1, so I did:
render() {
return <Component1>{this._render1}</Component1>;
}
_render1 = (...props1) => <Component2>{this._render2(...props1)}</Component2>;
_render2 = (...props1) => (...props2) => <MyComponent {...props1} {...props2} />;
But here, I am back again to original problem of recreating inline functions on each render (inside _render2).
Please suggest a way to mitigate this problem. How can I best send the combined data down? What am I doing wrong here?

Did you got a chance to take a look on React.Context (https://reactjs.org/docs/context.html)?
You can create something like:
SomeContext.jsx
import React from "react";
export const SomeContext = React.createContext();
index.jsx
<SomeContext.Provider value={this.state.contextState}>
<div>
....
<Component2 />
<MyComponent />
...
</div>
</SomeContext.Provider>
Component2.jsx / MyComponent.jsx
import React from "react";
import { SomeContext } from "./SomeContext";
export default () => (
<SomeContext.Consumer>
your jsx with access to the props from parent.
</SomeContext.Consumer>
);
Hope it helps you.

Understanding React Higher-Order Components

Can someone please explain Higher-order components in React. I have read and re-read the documentation but cannot seem to get a better understanding. According to the documentation, HOCs help remove duplication by creating a primary function that returns a react component, by passing arguments to that function.
I have a few questions on that.
If HOCs create a new enhanced component, can it be possible not to pass in any component as argument at all?
In an example such as this, which is the higher order component, the Button or the EnhancedButton.
I tried creating one HOC like this:
// createSetup.js
import React from 'react';
export default function createSetup(options) {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.testFunction = this.testFunction.bind(this);
}
testFunction() {
console.log("This is a test function");
}
render() {
return <p>{options.name}</p>
}
}
}
// main.js
import React from 'react';
import {render} from 'react-dom';
import createSetup from './createSetup';
render((<div>{() => createSetup({name: 'name'})}</div>),
document.getElementById('root'););
Running this does not show the HOC, only the div
Can anyone help out with a better example than the ones given?

A HOC is a function that takes a Component as one of its parameters and enhances that component in some way.
If HOCs create a new enhanced component, can it be possible not to pass in any component as argument at all?
Nope, then it wouldn't be a HOC, because one of the conditions is that they take a component as one of the arguments and they return a new Component that has some added functionality.
In an example such as this, which is the higher order component, the Button or the EnhancedButton.
EnhanceButton is the HOC and FinalButton is the enhanced component.
I tried creating one HOC like this: ... Running this does not show the HOC, only the div
That's because your createSetup function is not a HOC... It's a function that returns a component, yes, but it does not take a component as an argument in order to enhance it.
Let's see an example of a basic HOC:
const renderWhen = (condition, Component) =>
props => condition(props)
? <Component {...props} />
: null
);
And you could use it like this:
const EnhancedLink = renderWhen(({invisible}) => !invisible, 'a');
Now your EnhancedLink will be like a a component but if you pass the property invisible set to true it won't render... So we have enhanced the default behaviour of the a component and you could do that with any other component.
In many cases HOC functions are curried and the Component arg goes last... Like this:
const renderWhen = condition => Component =>
props => condition(props)
? <Component {...props} />
: null
);
Like the connect function of react-redux... That makes composition easier. Have a look at recompose.

In short, If you assume functions are analogues to Components, Closure is analogous to HOC.

Try your createSetup.js with:
const createSetup = options => <p>{options.name}</p>;
and your main.js
const comp = createSetup({ name: 'name' });
render((<div>{comp}</div>),
document.getElementById('root'));

A higher-order component (HOC) is an advanced technique in React for reusing component logic. Concretely, a higher-order component is a function that takes a component and returns a new component.
A HOC is a pure function with zero side-effects.
Example: CONDITIONALLY RENDER COMPONENTS
Suppose we have a component that needs to be rendered only when a user is authenticated — it is a protected component. We can create a HOC named WithAuth() to wrap that protected component, and then do a check in the HOC that will render only that particular component if the user has been authenticated.
A basic withAuth() HOC, according to the example above, can be written as follows:
// withAuth.js
import React from "react";
export function withAuth(Component) {
return class AuthenticatedComponent extends React.Component {
isAuthenticated() {
return this.props.isAuthenticated;
}
/**
* Render
*/
render() {
const loginErrorMessage = (
<div>
Please login in order to view this part of the application.
</div>
);
return (
<div>
{ this.isAuthenticated === true ? <Component {...this.props} /> : loginErrorMessage }
</div>
);
}
};
}
export default withAuth;
The code above is a HOC named withAuth. It basically takes a component and returns a new component, named AuthenticatedComponent, that checks whether the user is authenticated. If the user is not authenticated, it returns the loginErrorMessage component; if the user is authenticated, it returns the wrapped component.
Note: this.props.isAuthenticated has to be set from your application’s
logic. (Or else use react-redux to retrieve it from the global state.)
To make use of our HOC in a protected component, we’d use it like so:
// MyProtectedComponent.js
import React from "react";
import {withAuth} from "./withAuth.js";
export class MyProectedComponent extends React.Component {
/**
* Render
*/
render() {
return (
<div>
This is only viewable by authenticated users.
</div>
);
}
}
// Now wrap MyPrivateComponent with the requireAuthentication function
export default withAuth(MyPrivateComponent);
Here, we create a component that is viewable only by users who are authenticated. We wrap that component in our withAuth HOC to protect the component from users who are not authenticated.
Source

// HIGHER ORDER COMPOENTS IN REACT
// Higher order components are JavaScript functions used for adding
// additional functionalities to the existing component.
// file 1: hoc.js (will write our higher order component logic) -- code start -->
const messageCheckHOC = (OriginalComponent) => {
// OriginalComponent is component passed to HOC
const NewComponent = (props) => {
// business logic of HOC
if (!props.isAllowedToView) {
return <b> Not Allowed To View The MSG </b>;
}
// here we can pass the props to component
return <OriginalComponent {...props} />;
};
// returning new Component with updated Props and UI
return NewComponent;
};
export default messageCheckHOC;
// file 1: hoc.js -- code end -->
// file 2: message.js -- code start -->
// this is the basic component we are wrapping with HOC
// to check the permission isAllowedToView msg if not display fallback UI
import messageCheckHOC from "./hoc";
const MSG = ({ name, msg }) => {
return (
<h3>
{name} - {msg}
</h3>
);
};
export default messageCheckHOC(MSG);
// file 2: message.js -- code end -->
// file 3 : App.js -- code start --->
import MSG from "./message.js";
export default function App() {
return (
<div className="App">
<h3>HOC COMPONENTS </h3>
<MSG name="Mac" msg="Heyy !!! " isAllowedToView={true} />
<MSG name="Robin" msg="Hello ! " isAllowedToView={true} />
<MSG name="Eyann" msg="How are you" isAllowedToView={false} />
</div>
);
}
// file 3 : App.js -- code end --->