Child to parent data pass

Now suppose you want to show a alert as a child component but your showing logic is written in the parent

then you have to inform the parent when the user click on the cross you have to dismiss the modal or remove that child from the virtual DOM

We can do this by passing the function parameter

This is called parent-child communication

🔥

Now in the parent part we right the logic to show the component


const [isregistered, setisregistered] = useState(false);
const onSubmit = (data) => {
        console.log("This is the recived data : " , data)
        axios.post("http://localhost:3001/register", data).then((response) => {
          console.log(response);
            let status = response.data.status;
          if (status === "alreadyRegistered") {
            setisregistered(true) // updating the value to show the component
          }
          
return (
<>
{isregistered && <WarningAlertcomp dismiss={setisregistered} exclamation="Hey user" message="You are already registered" />}
 // Your data 

</>
    
        });

🔥

Now in you child element you have to reset the value of isregistered


import React from 'react'
import {Alert} from 'flowbite-react'
function WarningAlertcomp(props) {
   // sending this value to the parent to close the alert
    const onDismiss = () => {
// we are sending this data indirectely in the setisregistered(false) that means
// the child component will be removed from the virtual DOM
        props.dismiss(false)   
    }
  return (
      <div>
          <Alert
            color="warning"
            onDismiss={onDismiss} // calling a function that sets the value in the 
// props.dismiss that's a function 
            >
            <span>
                <span className="font-medium">
                {props.exclamation}!
                </span>
                {' '}{props.message}
            </span>
            </Alert>
    </div>
  )
}

export default WarningAlertcomp