Having problems calling an API id

Question

Hi I am having some problems figuring out how to access an id. I am making a twitter cloner and I have an Icon I would like to click and see what people are commenting on it. But I have hit a wall and cant figure out how to access the Id when the chatbubble is clicked. Any help would be greatly appreciated. The API works perfectly and I can call an id through postman.

  const GetData = (id) => {
    axios.get('https://localhost:44368/api/users/{id}').then((response) => {
      console.log(response.data, "list of heroes  ");
    });
  };
  return (
    <div className="post">
      <div className="ppictur">
        <Avatar src={avatar} />
      </div>
      <div className="post_body">
        <div className="post_header">
          <div className="post_headerText">
            <h3>
              {displayName}
              <span className="post_headerSpecial">
                <VerifiedIcon className="post_badge" />
                @{username}
              </span>
            </h3>
          </div>
          <div className="post_headerDesription">
            <p>{text}</p>
          </div>
        </div>
        <img src={image} alt="" />
        <div className="post_footer">
          <ChatBubbleOutlineIcon onClick={GetData()} />
          <RepeatIcon fontSize="small" />
          <FavoriteBorderIcon fontSize="small" />
          <PublishOutlinedIcon fontSize="small" />
        </div>
      </div>
    </div>
  );
}

export default Post;

  const [posts, setPosts] = useState([]);
  useEffect(() => {
    axios.get('https://localhost:44368/api/users').then((response) => {
      console.log(response.data, "list of heroes  ");
      setPosts(response.data);
    });
  }, []);
  const icon = document.getElementById("Dark");
  function DarkM() {
    document.body.classList.toggle("dark-theme");
  }
  return (
    <div className="commentbox">
      <div className="header">
        <h2>Home</h2>
        <DarkModeOutlinedIcon id="Dark" onClick={() => DarkM(icon)} />
      </div>
      <Opinion />
      {posts.map(post => (
        <Post
          avatar={post.profilePicture}
          displayName={post.name}
          username={post.userName}
          text={post.post}
          image={post.image}
          bull 
        />
      )).reverse()}
    </div>
  );
}

export default Feed; ```

Answer 1

Use template literal ES6 with backticks.

 const GetData = (id) => {
        axios.get(`https://localhost:44368/api/users/${id}`).then((response) => {
          console.log(response.data, "list of heroes  ");
        });
      };

Also when you call it, make sure to pass arguments.

<ChatBubbleOutlineIcon onClick={GetData(9)} />

Answer 2

In my other component i wasnt pushing all the data through. that is my props didnt know what i was trying to call

  const objectToPass = {
    postId, avatar, displayName, username, text, image
  }

  const showSingleData = (value) => {
    navigate(`/tweet/${value.postId}`)
    console.log(value)
  }``` 
it was a problem with my other component