Monday, June 3, 2024
Homepage · reactjs
 Popular · Latest · Hot · Upcoming
176
rated 0 times [  179] [ 3]  / answers: 1 / hits: 9615  / 4 Years ago, wed, august 12, 2020, 12:00:00

I'm having some difficulty passing data that I have mapped from an API, it displays a bunch of Event cards based on how many events there are in the API array.


This my Event Cards component;


export default function EventCard() {

  const classes = useStyles();

  const [data, setData] = useState([]);



  useEffect(() => {

   const fetchData = async () => {

    const result = await axios("http://localhost:23455/Event");

    setData(result.data);

  };

  fetchData();

  }, []);



 const handleClick = (value) => () => {

   console.log(value);

 };



return (

 <div>

  <Row>

    {" "}

    {data.map((item) => (

      <Card

        className={classes.root}

        style={{ marginRight: "25px", marginBottom: "25px" }}

      >

        <CardHeader

          avatar={

            <Avatar aria-label="recipe" className={classes.avatar}>

              {item.icon}

            </Avatar>

          }

          action={

            <IconButton aria-label="settings">

              <MoreVertIcon />

            </IconButton>

          }

          title={item.name}

          subheader="September 14, 2016"

        />

        <CardMedia

          className={classes.media}

          image={LordsLogo}

          title="Paella dish"

        />

        <CardContent>

          <Typography variant="body2" color="textSecondary" component="p">

            <p key={item.id}> {item.description}</p>

            <p key={item.id}> {item.startDate}</p>

            <p key={item.id}> {item.endDate}</p>

          </Typography>

        </CardContent>

        <CardActions disableSpacing>

          <IconButton aria-label="add to favorites">

            <Button variant="outlined">Steward</Button>

          </IconButton>

          <IconButton aria-label="share">

            <Button variant="outlined" onClick={handleClick({ item })}>

              Tickets

            </Button>

          </IconButton>

        </CardActions>

      </Card>

    ))}

  </Row>

</div>

);

}

I have an onclick function which logs what data is being added into "value" onclick, if I click a card, the console log the value of that specific card: enter


What I'm trying to do now is use this information in another component called ServiceForm. I want to be able to click the button, be linked to ServiceForm, and use the variables within "Item" in the ServiceForm component, Ideally as shown below;


        <Form.Group as={Col} controlId="formGridForeName">

          <Form.Label>**{item.description}**</Form.Label>

          <Form.Control

            name="firstName"

            placeholder="Enter name"

            onChange={this.handleChange}

          />

        </Form.Group>

EventCard if a functionalComponent and ServiceForm is a class based component, how could I pass the information from the first to the latter? Thanks


Edit: To show component hierarchy


ServiceForm is rendered in ServiceApplication, as shown:


import * as React from "react";

import { ServiceForm } from "../components/ServiceForm";



class ServiceApplication extends React.Component {

  render() {

   return (

    <React.Fragment>

      &nbsp; &nbsp;

      <h1>Service Application</h1>

      &nbsp; &nbsp;

      <h6>Users can use this page to apply for tickets.</h6>

      &nbsp; &nbsp;

      <ServiceForm />

    </React.Fragment>

  );

 }

}



export default ServiceApplication;

EventCard component is rendered in EventsPage, as shown below;


import EventCard from "../components/EventCards/EventCard";



class EventsPage extends React.Component {

  render() {

    return (

      <React.Fragment>

        &nbsp; &nbsp;

        <h1>Events</h1>

        &nbsp; &nbsp;

        <h6>

          Welcome to the Events, here you can apply for seats or tickets at the

      events shown below.

        </h6>

        &nbsp; &nbsp;

        <Row>

          <EventCard />

        </Row>

      </React.Fragment>

    );

  } 

}



export default EventsPage;

The idea is to pass on the ID when Clicking the 'Tickets' button on the EventCard (the ID is being pulled from an API and mapped).


More From » reactjs
 Answers
-1

It's a question of how you want to store state in your app really.


Take a simple example where a component which is a child of another. In that case, the parent can store the state locally e.g. useState() and pass it down as props to the child.


const SomeParent = () => {

  const [isTrue, setIsTrue] = React.useState(true)

  return (

    <Child isTrue={isTrue} />

  )

}

There may be cases where you want to share state across multiple components, or across your whole app. In that case, you have a load of different options.


1. Lifting state up to the highest point you need.


It would be easiest to move your state which is shared between multiple components up to the highest point that the two components share.
e.g.


Section component <- store state here

  Parent one

    child one

    child two

  Parent two

    child one

Here you can again either useState() or alternatively store the state in a useReducer() and pass dispatch down.


The data flow would then look something like this:



  1. initialise state in the section component e.g. const [someState, setSomeState]

  2. pass the setSomeState callback down to the Parent component and in turn child component as a prop e.g.

  3. In the child component set state onClick using the callback e.g. onClick = {() => action(item)}

  4. pass the state value down to your second Parent component and in turn child component e.g.

  5. You have access to the state in your form


This can be an object or multiple state values. As complexity increases, I tend to reach for useReducer().


2. Implementing useContext OR Redux in your application to create an application state accessible from any component (This is a much bigger explanation and there are lots of resources on each...


NOTE: I'm not sure why you're using two sets of brackets here:


const handleClick = (value) => () => {

   console.log(value);

 };

and when you're calling handleClick you need to switch it for an arrow function if you're passing a value:


onClick={handleClick({ item })



...



onClick={() => handleClick(item)}

[#2917] Sunday, August 9, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
bobbie
Add To Favorites
Follow
Total Points: 262
Total Questions: 91
Total Answers: 102
Location: Bermuda
Member since Mon, Dec 5, 2022
2 Years ago
bobbie questions
Tue, Mar 29, 22, 00:00, 2 Years ago
Mon, May 17, 21, 00:00, 3 Years ago
Mon, Jul 27, 20, 00:00, 4 Years ago
Wed, Dec 18, 19, 00:00, 5 Years ago
Tue, Nov 26, 19, 00:00, 5 Years ago
View All
;