For example, when you press the science button, the information (author, date, title etc) of the science category should appear.

CodePudding user response：

import React, {  useState } from "react";
const App = () => {
  const [state, setState] = useState([]);
  const Category = [
    "All",
    "Business",
    "Sports",
    "World",
    "Technology",
    "Entertainment",
    "Science",
  ];
  const fetchValue = (category) => {
    fetch(`https://inshorts-api.herokuapp.com/news?category=${category}`)
      .then((res) => res.json())
      .then((res) => setState(res.data));
  };
  const CategoryButton = ({ category }) => (
    <button onClick={() => fetchValue(category)}> {category}</button>
  );
  return (
    <>
      <div className="d-flex">
        {Category.map((value, index) => {
          return <CategoryButton category={value} key={index} />;
        })}
      </div>
      <br />
      {state?.map((data) => {
        return (
          <div >
            <img src={data.imageUrl} alt="Avatar" style={{ width: "300px" }} />
            <div >
              <h4>
                <b>{data.author}</b>
              </h4>
              <p>{data.content}</p>
            </div>
          </div>
        );
      })}
    </>
  );
};
export default App;