Todo lo que quiero aquí es cuando presiono el botón de búsqueda en Hero.jsx, establezco un valor para la constante de invitado en Hotelcards.jsx, ¿alguna solución?
el valor de invitado que quiero establecer está en este archivo.
Tarjetas de hotel.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]); } } };Y el botón que activará el evento de cambiar el valor está en este archivo. Héroe.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>Necesitaremos un poco más de su código para comprender realmente cómo se implementa esto, sin embargo, me parece que desea que su botón de búsqueda, la clase de componente Hero, pase sus valores a la tarjeta principal HotelCard. Si ese es el caso, puede pasar controladores de funciones de HotelCard a Hero, Hero puede llamar a la función onClick y configurar los datos de Hero dentro de HotelCard usando la función de devolución de llamada pasada como apoyo al componente Hero. Espero que esto ayude, la idea general anterior funcionará, pero es posible que deba cambiar qué componente es cuál, ya que no es una base de código/implementación completa como lo ha publicado.
Entonces, la solución fue envolver a ambos hermanos en un componente principal y manejar el estado dentro del componente principal. Luego, puede compartir fácilmente el estado entre los hermanos que desee y usar el estado dentro de los componentes secundarios. :
en el componente padre:
function App() { const [selectedMode, setSelectedMode] = useState('open') . . . <> <NewNavbar /> <Hero setSelectedMode={setSelectedMode} /> <Services /> <Options selectedMode={selectedMode}/> <ScrollToTop /> <Footer /> {/* <PaymentSummaryFinal1 />*/} </>en el primer héroe hermano:
export default function Hero({setSelectedMode}) { const onButtonClick=(mode)=>{ setSelectedMode(mode) } . . . <button onClick={()=>onButtonClick('closed')} >Search</button>y en el otro hermano 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> ); }Gracias a Chad S en los comentarios.