Button don't passing data to another component. React

Question

I have a component which is a button. Then in another component i am looping trough concerts and using this button to redirect to booking page but after clicking my data is not passed.

This is my button component:

    import React from "react";

export const BookBtn = (props) => {
  return (
    <div>
      <button
        className="bookBtn"
        style={{ backgroundColor: props.color }}
        // onClick={props.func}
      >
        {props.text}
      </button>
    </div>
  );
};

BookBtn.defaultProps = {
  text: "Unavailable",
};

export default BookBtn;

Here is the button in my main component where I try to click

 <a href={"/concert/" + concert.id} data={concert}>
                  <BookBtn text="Book a ticket" />
                </a>

Here is my component where i try to redirect to and retrive my data.

import React from "react";
import { useEffect, useState } from "react";
import axios from "axios";

export const Book = (data) => {
  const [concerts, setConcerts] = useState([]);
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const loadConcerts = async () => {
      const resConcerts = await axios.get("data/concerts");
      const tickets = await axios.get("/data/tickets");
    };
  });
  return (
    <div>
      Booking page
      <h1>{data.name}</h1>
    </div>
  );
};

UPDATE:

I wrapped my button in anchor tag and now i am able to redirect but still can't pass data.

Final Update

Allright, i managed to pass my data using useLocation hook. Problem is solved.

becouse onClick doesnt work. I tried like `onclick={() => navigate("/concert" + id}` before and nothing was happening. — lbs91, Feb 14 '23 at 14:28
I don't know what the `navigate` function is, but any standard way to navigate the window in JS should work: [How to get the browser to navigate to URL in JavaScript](https://stackoverflow.com/questions/1226714/how-to-get-the-browser-to-navigate-to-url-in-javascript) — DBS, Feb 14 '23 at 14:35
oh onClick working now, i didnt declared prop in my button component properly. Thank you for tip — lbs91, Feb 14 '23 at 14:54

score 2 · Accepted Answer · answered Feb 14 '23 at 14:44

I'd suggest using react-router to do the redirection or routing instead of anchor tags as they cause a refresh.

Use the Link tag from react-router and pass the concert state along with it!

Have a look at this https://reactrouter.com/en/main/components/link.

Button don't passing data to another component. React

1 Answers1