CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-hooks
Tester_Y
Tester_Y

Reputation: 377

How to pass a property from a react component to its parent?

I am creating a "presentation" component with multiple sections, each rendered dynamically.

In the parent component which houses all the different children, I want the "next button" disabled for each part until a certain condition has been met. The button lives in the parent component.

This component does not pass the property:

Child one example:

export function ChildOne() {
const [condition, setCondition] = useState(false);
    return (
      <div>
        <button onClick={() => setCondition(true)}>
          hello world
        </button>
      </div>
    );
}

Parent:

import ChildOne, condition from "../child-one"

export default function Parent() {
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne />
      )}
   </div>
   <button isDisabled={condition}>Next</button>
 );
}

I'm not sure how to pass the condition property from the child component so that I can use it in the parent component. In addition, is this methodology an anti-pattern? Can I conditionally make the button in the parent disabled based on values from the child component in another way?

Thank you.

Upvotes: 1

Views: 1314

Answers (4)

Muhammed Yasir MT
Muhammed Yasir MT

Reputation: 2014

try this way

child:

export function ChildOne({setCondition}) {
    return (
      <div>
        <button onClick={() => setCondition(true)}>
          hello world
        </button>
      </div>
    );
}

Parent:

import {ChildOne} from "../child-one"

export default function Parent() {
const [condition, setCondition] = useState(false);
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne setCondition={setCondition} />
      )}
   </div>
   <button isDisabled={condition}>Next</button>
 );
}

Upvotes: 5

John
John

Reputation: 1285

You could pass the onClick fucntion as a props param.

Child

export function ChildOne({onClick}) {
    return (
      <div>
        <button onClick={onClick}>
          hello world
        </button>
      </div>
    );
}

Parent

import ChildOne, condition from "../child-one"

export default function Parent() {
const [condition, setCondition] = useState(false);
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne onClick={() => setCondition(true)} />
      )}
   </div>
   <button isDisabled={condition}>Next</button>
 );
}

Upvotes: 0

Viet
Viet

Reputation: 12787

You should use a state in parent component to control disabled for steps. It can use when you have other pages.

export default function Parent() {
  const [condition, setCondition] = useState({});
  const changeCondition = (val) => {
    setCondition({...condition, [page]: val})
  }
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne changeCondition={} />
      )}
   </div>
   <button isDisabled={!condition[page]}>Next</button>
 );
}

  export function ChildOne({changeCondition}) {
      return (
        <div>
          <button onClick={() => {changeCondition(true)}}>
            hello world
          </button>
        </div>
      );
  }

Upvotes: 1

Nokwiw
Nokwiw

Reputation: 396

in your Parent component try this :

import ChildOne, condition from "../child-one"    
export default function Parent() {
    const [condition, setCondition] = useState(false);
    const handleClick = () => setCondition(true)
    return(
       <div className="childRenderer">
          {page == 1 && (
            <ChildOne handleClick={handleClick} />
          )}
       </div>
       <button isDisabled={condition}>Next</button>
     );
    }

and in use children :

export function ChildOne({handleClick}) {
    return (
      <div>
        <button onClick={handleClick}>
          hello world
        </button>
      </div>
    );
}

Upvotes: -1

Related Questions