how can I change props of component that pass from higher component . reactjs-CodePudding

this is my upper component.

const Add_singlepage = () => {
    const [feed,setFeed] = useState(null);//getFeddd.php
    const [show,setShow] = useState({sh_categorytitle:true,sh_category:false});

    return (
      <div>
          <Nav1 />
          <div className={style.modal}>
          {
             show ?
              <CategoryTitle show={show} getFeed={feed} /> //consider this - I pass show data
              :
              <Category />
          }
          </div>
      </div>
   );
 };

I pass some data as props in categoryTitle and I want control and change it in them. this is my CategoryTitle

import React from 'react';

const CategoryTitle = (props) => {
const {show} = props;
const next1 = ()=>{
    setShow({...show,sh_category:true,sh_categorytitle:false});
}
return (
       <div>
          ali
          <button onClick={next1} >reza</button>
       </div>
    );
};

export default CategoryTitle;

I know there is a wy like context - but I dont want do that.

CodePudding user response：

pass setShow too, as props, and this is what we call it callback works,

<CategoryTitle show={show} setShow={setShow} getFeed={feed} />

this is how call it in child,

const CategoryTitle = (props) => {
    const {show, setShow} = props;
    const next1 = () => {
        setShow({...show,sh_category:true,sh_categorytitle:false});
    }
}

CodePudding user response：

You could add a props named onChangeShow in CategoryTitle and do

const next1 = ()=>{
    props.onChangeShow();;
}

Then, in Add_singlepage you create a callback handleOnChangeShow (would be setShow here) and you pass it as props to CategoryTitle.