Forum : Passage de props entre composants

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

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

Dans ce composant tu passes en props myItems

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

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.

Passage de props entre composants

1 réponse