import { Row,Col,Navbar,Button,Form,Card,Image,Table,Container, Stack} from "react-bootstrap";
import {Link, useNavigate,useParams} from "react-router-dom"
import {React, useState,useEffect} from 'react';
import './GameComponents.css' 
import API from "../API.mjs";

//ignore this component
function Timer(){
    const [seconds,setSeconds]= useState(30);
    const [percentage, setPercentage] = useState(100);
    useEffect(() => {
        if (seconds > 0) {
          const timerId = setTimeout(() => {
            setSeconds(seconds - 1);
            setPercentage((seconds - 1) / 30 * 100); // Calculate percentage
            }, 1000);
          return () => clearTimeout(timerId); // clean timeout
        }
      }, [seconds]);
    return(    
    <Card> 
        <Card.Body> 
        <div>
      <h1 className="TimerTitle">Timer: {seconds} seconds</h1>
      <div className="progress-bar">
        <div
          className="progress-bar-fill"
          style={{ width: `${percentage}%` }}
        ></div>
      </div>
    </div>

        </Card.Body> 
    </Card> 
    );
}
//ignore this component 
function ImageContainer(props){

    //console.log(props.memes);
    return(
    <Image className="image-container image-border" src='./src/images/tradeoffer.jpg' rounded/>
);

}
//console.log is not printed the first time, then it is printed
function AnswersContainer(props){
    console.log(props.captions)
return(<>
 <Stack gap={5} className="CaptionComponent">
    {props.captions.map((caption)=>{
        <Row><Answer caption={caption}/></Row>
    })}
    </Stack>
</>)

}
//this console.log() is never printed
function Answer(props){
    console.log("inside answer")
    return(
        <Row>
            <Button variant="light">{props.caption}</Button>
        </Row>
    );
    
}
function GameComponent(){
    const [memes,setMemes]= useState([]);
    const [captions,setCaptions]= useState([]);

    //useEffect to set memes state
    useEffect(()=>{
        const getMeme=async ()=>{
            const m=await API.getMemes();
            setMemes(m);
        }
        getMeme();
    },[]);  

    //useEffect to set captions state
    useEffect(()=>{
        const getCaption=async ()=>{
            const c=await API.getCaptions();
            setCaptions(c);
        }
        getCaption();
    },[]);  

    return(<>
    <Container className="MainContainer">
        <Card>
            <Row>
                <Timer/>
            </Row>
            <Row>
                <Col md={6}> 
                    <ImageContainer memes={memes}/>
                </Col>
                <Col md={6}>
                    <AnswersContainer captions={captions}/>
                </Col>
            </Row>
        </Card>
    </Container> 
    </>);
}

export default GameComponent;

Hi everybody I’m writing because I have a problem, in the function GameComponent() I use an useEffect to change the state of captions, which I then use in the AnswerContainer and Answer components to show the possible answer (the app I’m trying to make has a table with a meme on the left column and 7 possible captions/answers which I get from the server through the API call).

the problem is that I’m not seeing anything in the Answer components, not even the console.log(), while in the AnswerContainer component I see the console.log of props.caption, the first are empty, then I see the console.log() actually print the captions I wrote in the DB, so this reassure me the API call works, the state is updated but no component re-rendering