Passing state to stateless functions

[james_g2001]

I am trying to create a number of stateless components that are linked to parent lists that will have links to these pages. In the same way as a product list links to product detail in a separate page. As I am using Redux would it be better if I just passed the id from the parent component and then used the array number to get all the required data? It would work better if the list page had a limited amount of detail displaying of the items and then the detail page could show everything else.

Is the array method the best way to handle these situation when using React? the store already has all the data populated.

Also what is the correct way to deal with this in terms of the routing of the app? Obviously I don’t want to access this before the id has been passed in the component.

const DiveSchoolDisplay = ({match, location}) => {

    const classes = useStyles

    const user = useSelector(state => state.auth.user);

    const diveSchoolList = useSelector(state => state.diveSchool.diveSchoolList);

    const [posts, setPosts] = useState({
        user: [],
        redirectToSignin: false,
        certifications: false
    })

    const jwt = auth.isAuthenticated()

    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(requireDiveSchoolData());
    }, [])

    const loadPostsByBoard = (user) => {
        listPostsByUser({
            userID: user
        }, {
            t: jwt.token
        }).then((data) => {
            if (data.error) {
                console.log(data.error)
            } else {
                setPosts(data)
            }
        })
    }

    const removePost = (post) => {
        const updatedPosts = posts
        const index = updatedPosts.indexOf(post)
        updatedPosts.splice(index, 1)
        setPosts(updatedPosts)
    }

    return (
        <Card className={classes.root}>
            <CardActionArea>
                <CardMedia
                    component="img"
                    alt="articlePhoto"
                    height="140"
                    image={diveSchoolList.photos}
                    title="article photo"
                />
                <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                        {diveSchoolList.diveSchoolName}
                    </Typography>
                    <Typography variant="body2" color="textSecondary" component="p">
                        {diveSchoolList.diveSchoolLocation}
                    </Typography>
                    <Typography gutterBottom variant="h5" component="h2">
                        {diveSchoolList.diveSchoolName}
                    </Typography>
                    <Typography variant="body2" color="textSecondary" component="p">
                        {diveSchoolList.diveRegionID}
                    </Typography>
                    <Typography gutterBottom variant="h5" component="h2">
                        {diveSchoolList.certificates}
                    </Typography>
                    <Typography variant="body2" color="textSecondary" component="p">
                        {diveSchoolList.diveSpotID}
                    </Typography>
                </CardContent>
            </CardActionArea>
            <CardActions>
                <Button size="small" color="primary">
                    Share
                </Button>
                <Button size="small" color="primary">
                    Learn More
                </Button>
            </CardActions>
        </Card>
    )
}

[kevinSmith]

I’m having a hard time connecting what your code to what you’re asking - you have a lot of other things going on there.

If I generalize what I think you’re asking…

Say, I had a list component and it gets the list from redux. If I want to render one of those list items in a child component. I could pass the list item into the child component or I could pass in an index and let the child find the list item in the list that it (the child component) gets from redux. Is that your question?

Given that, I’d probably do the former. If I already have the element in the parent, why not just pass it in. That also means that I don’t have to hook that child up to redux and I can just keep it a dumb component (the child) that just renders what I tell it to.