Accessing State Variable passed as a prop in React

Question

I have a card component named AddressCard.js. I am calling it in the parent page Address.js. Based on Conditions, I am rendering 2 types of cards, One has an onclick event that displays a different divs, and the other displays already present data.

I am passing setAddressForm as a prop and setting it true, but I am getting an error saying "setAddressForm is not a function". Please let me know what I am doing wrong. Thank you in advance.

   //Address.js
export default function Address() {

const [addressForm, setAddressForm] = useState(false);
<div> 
{!addressForm && (
        <div className="addressCards">
            <AddressCard isAdd={true}   />
            {console.log(addressForm)}


          {AddressData.map((cardProps) => {
                        

                  return (
                    
                      <AddressCard {...cardProps} />
                    
                  );
                        
                })}
        </div>

//AddressCard.js
export default function AddressCard({setAddressForm,isAdd,...props}) {
  const handleClick=()=>{
    if(isAdd){
      setAddressForm(true);
    }
  }
  return (
    <div className="address-card-container" onClick={handleClick}>
      {props.isDefault?<div className="isDefault">Default</div>:<div className="isDefault">   </div>}
      <div className="name-and-icons">
      {!props.isAdd&&<div className="name">{props.name}</div>}
      {!props.isAdd&&<div>
          <Edit className="icon"/>
          <DeleteTwoTone className="icon"/>
        </div>}
      </div>
      {!props.isAdd&&<div className="address">
       
        {props.address}
      </div>}
      {!props.isAdd&&<div className="contact">Contact: {props.contact}</div>}
      {!props.isAdd&&<div className="delivery-field">
        <LocationOnIcon className="location-icon"/>
        <a className="delivery">Add Delivery Instructions</a>
      </div>}
      {props.isAdd&& <div>+ Add Address</div>}
    </div>
  );
}


//AddressData.js
const AddressData=[
    {
        name:"Rahul Mishra",
        address:"Raiya Kar Bhavan Nr Times Of India, Ashram Road AHEMEDABAD, GUJARAT 380009 India",
        contact:"9988776655",
        isDefault:true,
    },
    {
        name:"Rahul Mishra",
        address:"Raiya Kar Bhavan Nr Times Of India, Ashram Road AHEMEDABAD, GUJARAT 380009 India",
        contact:"9988776655",
        isDefault:false,
    },
]

Answer 1

Try adding this.

//Address.js
const changeState =()=>{
    setAddressForm((prev)=>(!prev));
}
<AddressCard functionChangeState={changeState}/>


//AddressCard.js
const HandleClick =()=>{
    props.functionChangeState();
}