-1

How can I pass a prop (when modified) from Child Component to a Parent Component.

Some Details : I am working on an existing codebase where I have Parent Component embedded in 'unstated.Container' and a separate Child Component , where I am trying to add a button. When a user clicks this button some value gets updated , which needs to be passed to the Parent component .

Thank you.

 import {Container} from 'unstated';

   class DelContainer extends Container{

     state = { sortAsc : true, notified : null}

    setVal = async (Id, value)  => { console.log (`Id : ${Id});  console.log('value: ${value}); }

}

//Child Component (Separate file)
const ChildItems = (props) => {
  const [some_value ] = props;
  const [some_color, setColor] = useState(" ");

 const MarkIt = ({some_value})
 {
   some_value = this.props.some_value;  //ISSUE HERE
 }

 return (
   <IconButton >
      <StarOutlinedIcon onClick = {MarkIt} style={{color: `${some_color}`}}/>
   </IconButton>
 );
}

//Parent Component (Separate file)
import {Subscribe} from 'unstated';
const DelList = (props) => {

    return(

        <Subscribe to ={[DelContainer]}>
        {
           (delStore) => {
                   const[person, isLoading] = delStore.state;
             return(
                     <div>
                        <List className = {props.className} isLoading = {Loading}>
                        {
                             isLoading && person
                               .map((person, index)=>{
                                 return <ChildItem key={index}
                                           person = {person}
                                           some_value = {delStore.MarkIt(some_value)}; 
                                           
                               }
                        }
                       </List<
                     </div>
                   )
          }
        }
      );
 }
user1462617
  • 413
  • 1
  • 13
  • 23
  • It's done via callbacks https://medium.com/javascript-in-plain-english/easy-tutorial-on-react-callbacks-fad6a51cc8f1 – vanshaj Dec 20 '20 at 07:56
  • 2
    please take a look at the react documentation here - https://reactjs.org/docs/lifting-state-up.html – Deryck Dec 20 '20 at 07:56

1 Answers1

0

Read this : How to update parent's state in React?

Reactjs DOCS: https://reactjs.org/docs/lifting-state-up.html

class Parent extends React.Component {

  liftStateHander=()=> {
    this.setState({
       name:"John"
    })
  }

  render() {
    return <Child handler={this.liftStateHander} />
  }
}

class Child extends React.Component {
  render() {
    return (
       <button onClick={this.props.handler}>
          Click For Change State Parent 
       </button>
    )
  }
}
Mahdi Sheibak
  • 620
  • 1
  • 4
  • 13
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/27890565) – kebs Dec 20 '20 at 09:46
  • Okay. you Give me a Score – Mahdi Sheibak Dec 20 '20 at 10:05
  • 1
    Editing your answer is a good first step, as your original answer—which relied primarily on a link—would have been deleted. Now, people will have the opportunity to upvote your answer if and when they find your answer useful. Please don’t demand upvotes; that’s up to each member of the community to decide based on whether your answer was useful to them. – Jeremy Caney Dec 20 '20 at 10:15
  • OK. I did not know that ‍♂️‍♂️. Thank you for saying that. – Mahdi Sheibak Dec 20 '20 at 10:31
  • Well, all of this is explained in [help center](https://stackoverflow.com/help), see [here](https://stackoverflow.com/help/how-to-answer) ;-). – kebs Dec 20 '20 at 21:14
  • Thanks for pointing out to the the documentation – user1462617 Dec 22 '20 at 15:39
  • can you pass data from child js to parent tsx component? – JayC Jan 12 '21 at 15:24