set value on a click button from a function component to another const component React

Question

All I want here is when I press the search button in Hero.jsx , I set a value to the guest constant in Hotelcards.jsx , any solutions ?

the guest value that I wanna set is on this file.

Hotelcards.jsx

import { Link } from "react-router-dom";
import React,{useState,useEffect} from 'react';
import styles from '../styles/HotelListCards/HotelCards.module.css';
import {Checkkin as checkkin}  from "./Hero";
import {Checkkout as checkkout}  from "./Hero";
import {rowss as rows } from "./Hero";
import {notavailableat as notavailableat } from "./Hero";
import {prices as prices } from "./Hero";

const HotelCards = ({ idroom , title, status = true, price, img  }) => {
    const [guests, setGuest] = useState('')

    const [qty, setTitle] = useState('')
    var total_price = 0;
    if(prices.length!==0){
        for (var i=0;i<prices.length-1;i++){
            total_price+=parseFloat(prices[i]);
        }

    }
};

And the button that will trigger the event of changing the value is on this file. Hero.jsx

import React, {useEffect, useState, useCallback} from 'react';
import styled from 'styled-components';
import homeImage from '../assets/booking-bg.jpg';
import styles from '../styles/HotelListCards/HotelCards.module.css';
import {differenceInDays, format} from "date-fns";

var Checkkin = 0;
var Checkkout= 1;
let notavailableat="";
let rowss=[];
let prices =[];
export {Checkkin,Checkkout,rowss,notavailableat,prices};

export default function Hero() {
    const [availdata, setavailData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
}

<div className="search">
    <button >Search</button>
</div>

This would typically be accomplished via a callback that you would pass to the Hero component to "do something" when the search button is clicked. Then you define that callback in your HotelCards or some intermediary component. — Chad S., Mar 14 '22 at 17:30
i tried that and it didn't do anything for me ( followed some who had the same problem like me in Stachoverflow) , maybe i did it in a wrong way . can you elaborate more — Charfeddine Mohamed Ali, Mar 14 '22 at 19:12
This answer explains what I mean: https://stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component — Chad S., Mar 14 '22 at 21:55
Does this answer your question? [React Hook : Send data from child to parent component](https://stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component) — Chad S., Mar 14 '22 at 21:56
it does look like it , but in my case the components are not ( parent / child) . — Charfeddine Mohamed Ali, Mar 14 '22 at 22:34
which means when the button clicked on the first child component (Hero.jsx) i need to set the value on the second child component(HotelCards.jsx) — Charfeddine Mohamed Ali, Mar 14 '22 at 22:39
So you want to send data between siblings.. Then you should move the state up to a parent component above them: https://stackoverflow.com/questions/34734301/passing-data-between-two-sibling-react-js-components — Chad S., Mar 15 '22 at 00:34
Problem solved in my case it was from a sibling to a child of another siblings , in my case i was lacking the understanding of ( parent , child , siblings ) in react components and your comments was helpful for me to understand them and know what to search for exactly . Thanks ! — Charfeddine Mohamed Ali, Mar 15 '22 at 16:36

score 0 · Answer 1 · answered Mar 14 '22 at 17:36

We will need a bit more of your code to really understand how this is being implemented, however it appears to me you want your search button, the Hero component class, to pass up its values to the parent HotelCard. If that is the case, you can pass function handlers from HotelCard to Hero, hero can then call the function onClick, and set the data from the Hero inside the HotelCard using the callback function passed as a prop to the Hero Component. Hope this helps, the general idea above will work but you may need to change which component is which as its not a complete code base/implementation as you have posted.

score 0 · Accepted Answer · answered Mar 15 '22 at 16:51

So the solution was wrapping both siblings in a parent component and handle the state inside the parent component. Then you easily can share the state between any siblings that you want and use the state inside the child components. :

in the parent component :

function App() {
    const [selectedMode, setSelectedMode] = useState('open')
.
.
.

<>
            <NewNavbar />
              <Hero setSelectedMode={setSelectedMode} />
              <Services />
              <Options selectedMode={selectedMode}/>
              <ScrollToTop />
              <Footer />
              {/* <PaymentSummaryFinal1 />*/}
            </>

in the first sibling Hero:

export default function Hero({setSelectedMode}) {
    const onButtonClick=(mode)=>{
        setSelectedMode(mode)
    }
.
.
.
<button onClick={()=>onButtonClick('closed')} >Search</button>

and on the other sibling Options.jsx

export default function Options({selectedMode}) {
.
.
.

    return (
        <div className={`${styles.containers}`}>

            
                <div>
                    <HotelCards
                        mode={selectedMode} // pass it to the child of this sibling
                    />
                </div>
            )}

        </div>
    );

}

Thanks to Chad S in the comments.

set value on a click button from a function component to another const component React

2 Answers2

Linked