Bonjour,

Dans une application React je cherche à transmettre des props entre mes composants pour mettre à jour mon state qui est géré par le composant parent.
Je transmet une fonction en props à un composant qui lui même le transmet à un autre composant.

Voici ce que j'ai dans mon composant parent. Quand je coche une de mes options, itemId est "undefined" puis prends une valeur. Je pense que c'est dû au rendu des composants qui se fait après l'appel de la fonction handleChooseCardAdditionalOption() mais je vois pas comment faite autrement.

<CardType 
    handleChooseCardAdditionalOption={ this.handleChooseCardAdditionalOption }
    myItems={this.state.zeOrder.items}
/>

handleChooseCardAdditionalOption = (checked, index, itemId, cardTypeId) => {
        console.log(itemId)
}

Voici mon composant "CardType". Je fais un .map() sur mes items et j'affiche pour chaque item un composant AdditionalOptionCard auquel je transmet la fonction.

{ items.map( (e, i) => {
    return (
        <>
            <AdditionalOptionCard 
                itemId={i}
                handleChooseAdditionalOption={ chooseCardAdditionalOption }    
            />
        </>
    )
} ) }

const chooseCardAdditionalOption = (checked, index, itemId) => {
        this.props.handleChooseCardAdditionalOption(checked, index, itemId, cardType.card_id);
    }

Et enfin voici mon composant AdditionalOptionCard.

<div className="checkout-additional-options">
    {this.props.options.map( (item, index) => (
        item.option_status ? (
            <div key={index} className="additional-option-item">
                <div className="form-row">
                    <div className="form-input">

                        <div className="option-name">
                            <label for={ `additional-option-${item.option_id}` }>
                                {item.option_name}
                            </label>

                            <div className="option-price">
                                 <input 
                                     type="checkbox" 
                                     id={ `additional-option-${item.option_id}` }
                                     name="order[additional_options][]" 
                                     value={item.option_id} 
                                     onChange={ (e) => this.handleChooseAdditionalOption(e, item.option_id) } 
                                 />
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         )
     )}
</div>

handleChooseAdditionalOption = (e, index) => {
        this.props.handleChooseAdditionalOption(e.target.checked, index, this.props.itemId);
}

J'ai volontairement omis du code pour que ce soit pas trop chargé.
L'idée c'est que j'affiche un composant <CardType/> qui lui même affiche un ou plusieurs composant <AdditionalOptionCard/>

Quand je coche une des options dans ce dernier composant je dois faire remonter des informations jusqu'au premier composant pour mettre à jour mon state.

Mais quand je coche une option, "itemId" est d'abord undefined puis prends sa bonne valeur.
Sauf que le undefined au début provoque un dysfonctionnement dans mon application.

Vous avez une idée de comment je pourrais faire ?

Merci d'avance

1 réponse


Hello, c'est pas tres claire ce que tu veux faire quand je regardes ton code.

Dans ce composant tu passes en props myItems

<CardType 
    handleChooseCardAdditionalOption={ this.handleChooseCardAdditionalOption }
    myItems={this.state.zeOrder.items}
/>

mais quand tu montre ton CardType tu utilises items. Est-ce que items correspond à myItems ?

{ items.map( (e, i) => { <== i items === myItems ?
    return (
        <>
            <AdditionalOptionCard 
                itemId={i}
                handleChooseAdditionalOption={ chooseCardAdditionalOption }    
            />
        </>
    )
} ) }

Ensuite tu passes en props cette fonction

handleChooseCardAdditionalOption = (checked, index, itemId, cardTypeId) => {
        console.log(itemId)
}

Pourquoi tu la modifie 2 fois ?

const chooseCardAdditionalOption = (checked, index, itemId) => {
        this.props.handleChooseCardAdditionalOption(checked, index, itemId, cardType.card_id);
    }

    puis 

    handleChooseAdditionalOption = (e, index) => {
        this.props.handleChooseAdditionalOption(e.target.checked, index, this.props.itemId);
}

Je capte pas pourquoi tu passes pas la fonction qu'il y a dans lecomposant parent ?

Je comprend pas non plus d'ou sort this.props.options dans le composant AdditionalOptionCard, parce qu'a aucun moment tu le passes en props

<AdditionalOptionCard 
                itemId={i}
                handleChooseAdditionalOption={ chooseCardAdditionalOption }    
            />

Et derniere chose dans le composant AdditionalOptionCard

tu passes cete fonction qui prend en second parametre un index visiblement

handleChooseAdditionalOption = (e, index) => {
        this.props.handleChooseAdditionalOption(e.target.checked, index, this.props.itemId);
}

sauf que sur ton onChange tu fais ceci, tu passes un id en second parametre à la place d'un index.

onChange={ (e) => this.handleChooseAdditionalOption(e, item.option_id) } 

Que fais tu du param checked dans ta fonction ?
Pourquoi tu met un name comme ceci name="order[additional_options][]" sur tes checkbox ?

Finalement si tu peux mettre un peu plus de code cela pourrai rendre plus compréhensible ce que tu essaie de faire.