From child1 modal to child 2 component Reactjs

Asked
Active3 hr before
Viewed126 times

10 Answers

reactjsmodalchildcomponent
90%

You need to have a function in your app which takes the values when changed, passes the value to child 2 through props, and pass that function to child1 and use it in onClick of the button.,If I have this basic layout. (child 2 has a modal in the page I want to click a button in the modal(located in child2) and have it carry the image(and value) to child1),Connect and share knowledge within a single location that is structured and easy to search.

I have come up with something like this. See whether its concepts fit your problem.

class Child1 extends React.Component{

    handleOnClick = () => {
        //your logic
    }

    render = () => (
        <Child2 handleOnClick={handleOnClick}/>
    )
}

class Child2 extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            value1: '',
            value2: '',
        }
    }

   extraLogicForOnClick = () => {
       const { handleOnClick } =  this.props;
       handleOnClick(this.state); 
   } 

    render = () => {
        <Modal>
            <Button onClick={extraLogicForOnClick}/>
        </Modal>
    }

}

88%

This is the easiest direction of data flow in React and the most basic one.,Step 2: Pass the state and the callback function as props to all children inside the Provider Component.,Method 2: Use a global store maintaining the states of all child components which are needed to interact and consume the data required from the store — Redux

App└── Parent├── Child1└── Child2
load more v
72%

Using these different data passing methods, you will be able to pass data between different components at different levels.,Passing data between- Parent to Child- Child to Parent- Child to Child,Please be noted that the App.js is going to be work as the Root component to all and the Parent component has been called inside it.

In order to explain things in a more practical approach, I have created a sample React app by running the following command as usual.

npx create - react - app sample_app
load more v
65%

Passing data from Child to Parent Component:,How to pass data from child component to its parent in ReactJS ?,We have created two Components named Child.js and Parent.js as shown in the above structure.

npx create - react - app myapp
load more v
75%

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.,Normally, when you return an element from a component’s render method, it’s mounted into the DOM as a child of the nearest parent node:,However, sometimes it’s useful to insert a child into a different location in the DOM:

ReactDOM.createPortal(child, container)
load more v
40%

Pretag
 Pretag team - issue, fix, solve, resolve
22%

Step 3: Set the MyProvider component as a parent to the two child components, Child1 and Child2.,Use the variable this.props.dataFromParent to obtain the data passed from parent to child.,Method 2: Use Redux by maintaining the states of all child components that you might need in a global store and obtain the data from said store.

1 App
2└── Parent
3├── Child1
4└── Child2
load more v
60%

Or maybe you have a modal, but you want to trigger it from a different component. ,Firstly, let's pass data between a parent component and a child component. .,First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}
load more v
48%

I'am getting an input from Child2 and I'am passing it to the Parent component (until now, I know how to do). But then I need to pass that input to Child1 to update it's state.,Let's say that my parent component got two child component : ,Hope you can get the main idea - create a function in the Parent component that will change the value passed to the Child1. ReactJS: Why is passing the component initial state a prop an anti-pattern?

Let's say that my parent component got two child component :

Parent
   |
   Child1 |
   Child2
load more v
23%

This is how we can render child 1 right next to child 2, yet, provide child 1's state to child 2 as a props,Callback Stack module is normal React component (class or function), whereas Hooks module is a custom hook which is a heavily crippled down version of component.,Callback Stack module is much more powerful, whereas Redux module is far weaker than even Hooks. Redux has always been about managing pure data, there is not even function to be stored in Redux, let alone flow control.

cs(
    ["count", ({}, next) => State({initValue: 0, next})],
    ({count})=>(
        <div>
            Count: {count.value}
            <button
                onClick={() => count.change((v)=>v+1)}
            >+</button>

            <button
                onClick={() => count.change((v)=>v-1)}
            >-</button>
        </div>
    ),
)
load more v

Other "reactjs-modal" queries related to "From child1 modal to child 2 component Reactjs"