Multiple child components getting same prop value

Question

I have two self-defined class components, from which I create two instances like:

<PersonAddModal details={details} open={open} setOpen={setOpen} addFather={false}/>

So the addFather property is different, the rest is the same.

The PersonAddModal looks as follows. (The Add father/Add mother text is displayed correctly though, depending on the val of addFather)

import React from 'react'
import { Modal } from 'react-responsive-modal';


class PersonAddModal extends React.Component 
{
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }



    handleSubmit(event)
    {
    //...
    }
    
    getParentTypeString()
    {
        return this.props.addFather ? "father" : "mother";
    }

    render() {
        return(
    <div>
        <button onClick={() => this.props.setOpen(true)}>{this.props.addFather ? <div>Add father</div>:<div>Add mother</div>}</button>
                                    <Modal open={this.props.open} onClose={() => this.props.setOpen(false)}>
                                        <h1>Add a {this.getParentTypeString()} of {this.props.details.firstName}</h1>
                                        <form onSubmit={(event) => {this.handleSubmit(event)}}>
                                        <input type="text" id="firstName" name="firstName" placeholder="Enter first name" required/>
                                        <input type="text" id="lastName" name="lastName" placeholder="Enter last name" required/>
                                        <button type="submit">Submit</button>
                                        </form>
                                    </Modal>
    </div>
        )};
}

export default PersonAddModal;

I really don't understand why (apparently) the val of addFather of the latest added component seems also to be used for the first component. Aren't they supposed to be independant from each other? Help is graetly appreciated!

Edit: They;re being used as follows:

import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';
import PersonLink from './PersonLink'
import PersonAddModal from './PersonAddModal'

const PersonDetails = ({ match }) => {



    const [details, setDetails] = React.useState({});
    const [isLoading, setIsLoading] = React.useState(true);
    const [open, setOpen] = React.useState(false);

    React.useEffect(() => {
        fetch(`https://localhost:44332/api/person/${match.params.id}/details`)
            .then(response => response.json())
            .then((data) => { setDetails(data); setIsLoading(false); });


    }, [match.params.id])

    return (
        <>
            {
                (isLoading || details.id == null) ? <h1>Loading..</h1>
                    :
                    <>
                        <h1>Person Details of {details.firstName} {details.lastName}</h1>
                        <h2>Parents </h2>
                        {
                            details.father != null && details.father != 0 ?
                            <PersonLink id={details.father  } />
                                :
                                <>
                                    <PersonAddModal details={details} open={open} setOpen={setOpen} addFather={true}/>
                                </>
                        }
                        {
                            details.mother != null && details.mother != 0 ?
                                <PersonLink id={details.mother} />
                                :
                                <PersonAddModal details={details} open={open} setOpen={setOpen} addFather={false}/>
                        }
                        {details.spouse != 0 ?
                            <>
                                <h2>Spouse</h2>
                                <PersonLink id={details.spouse}/>
                            </>
                            : <></>}
                        <h2>Siblings</h2>
                        {
                            details.siblings.map((sibling) => (<PersonLink id={sibling} />))
                        }
                        <h2>Children</h2>
                        {
                            details.children.map((child) => (<PersonLink id={child} />))
                        }
                    </>
            }



        </>
    );
};


export default PersonDetails;

Answer 1

I've found the answer:

As you could see, I was creating two Modals, and my issue was that both were displaying the same. Turns out that because I was giving them both the same state (open/setOpen), no matter on which I clicked, always the same was opening.