CODEWITHSUNDEEP
javascriptreactjs
Quentin
Quentin

Reputation: 371

Component not displayed - React

I seem to have a problem with my Material UI component. I just can't get it to display in spite of several rereadings (plus checks on other projects where I have exactly the same thing).

Thanks to a console.log I know that I am browsing my component, I also know that my result.map(index, i) is working because I can also display in my console the information of this index.

It's probably an oversight, but I really don't see where. Yet I have no errors, not even in the console

Here is the full code of my page :

const index = () => {

    // TimeLine
    const [result, setResult] = useState([]);

    useEffect(()=>{
        axios.get('/api/timeLine_siinfra').then((response) => {
          setResult(response.data)        
        });
    }, []);

    const classes = useStyles();

    const TimeLineAffichage = result.map((index, i) => {
        let isEven = i % 2 === 0,
        titleComponent = (
                <Grid item>
                    <Typography style={{ fontFamily: 'Poppins', fontWeight: 300 }} variant="h6" component="h1">
                        {index.sif_titre}
                    </Typography>
                    <Typography style={{ fontFamily: 'Poppins', fontSize: 'smaller', fontWeight: 200 }} className="font-face-poppins">
                        {index.sif_msg}
                    </Typography>
                </Grid>
        );

        <TimelineItem className={classes.timelineStyle}>
            <TimelineOppositeContent>
                <Typography style={{ fontFamily: 'Poppins', fontWeight: 300 }} variant="body2" color="textSecondary">
                    {index.sif_date}
                </Typography>
            </TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot className={classes.dot}>
                    <LaptopMacIcon />
                </TimelineDot>
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent>
                <Paper elevation={3} className={classes.paper}>
                    <Grid container style={{ display: 'flex', flexWrap: 'nowrap' }}>
                        {isEven && titleComponent}
                        <Grid container alignItems="center">
                            {isEven
                                ?
                                <Zoom overlayBgColorStart='rgba(73, 80, 87, 67)' overlayBgColorEnd='rgba(73, 80, 87, 67)' zoomMargin={50}>
                                    <img src={index.sif_image} alt={index.sif_image} className={classes.img} style={{ maxWidth: 200, maxHeight: 200, marginLeft: '10px' }} />
                                </Zoom>
                                :
                                <Zoom overlayBgColorStart='rgba(73, 80, 87, 67)' overlayBgColorEnd='rgba(73, 80, 87, 67)' zoomMargin={50}>
                                    <img src={index.sif_image} alt={index.sif_image} className={classes.img} style={{ maxWidth: 200, maxHeight: 200, marginRight: '10px' }} />
                                </Zoom>}
                        </Grid>
                        {!isEven && titleComponent}
                    </Grid>
                </Paper>
            </TimelineContent>
            {console.log("I'm HERE !!!!")}
            {console.log(index, i)}
        </TimelineItem>
    }) 

    return (
        <div>
            <Timeline align="alternate">
                {TimeLineAffichage}
            </Timeline>
        </div>
    )
}

export default index;

Thanks for any help on my topic. (I sincerely hope that the problem is more complex than a forgetfulness)

EDIT : Adding a return() in my component was enough. Still don't know for other projects why it's was working without any return it in.

Upvotes: 0

Views: 55

Answers (2)

TR3
TR3

Reputation: 387

#1 You aren't returning anything in your TimeLineAffichage function

#2 You need to call that function {TimeLineAffichage()}

#3 You should conditionally render that return based on result, and handle the "empty time" in between:

       {result && TimeLineAffichage()}

#4 If you still don't see the component, then you need to have a useEffect trigger the TimeLineAffichage function when there is a change in result and handle your return differently.

Upvotes: 1

Saurabh Khade
Saurabh Khade

Reputation: 64

You don't have any return statement in the function passed to map mathod. So, it will return undefined which will be not rendered on page. Use the return statement in the function.

Upvotes: 2

Related Questions