On click on link should create/open an html page in react-hooks site with contents displaying

Question

I have integrated my React-hooks website with contentful. Now I am able to see contents from contentful website in my react site. On click on ...more >> link under each tile I would like to display the contents received to open in a separate html page, so that I can view full content of the post. Can someone please advise me on how can I achieve that ? ( Home tab > screenshot of tiles )

Demo

https://codesandbox.io/s/optimistic-lamarr-fo917

Home.js

import React, { useState, useEffect } from "react";
import "./styles.css";

const items = [
  {
    sys: {
      space: {
        sys: {
          type: "Link",
          linkType: "Space",
          id: "pih85ghtkifg"
        }
      },
      id: "2L5jhZhtvUwuWe20kYM2vh",
      type: "Entry",
      createdAt: "2020-09-20T11:50:53.764Z",
      updatedAt: "2020-09-20T11:50:53.764Z",
      environment: {
        sys: {
          id: "master",
          type: "Link",
          linkType: "Environment"
        }
      },
      revision: 1,
      contentType: {
        sys: {
          type: "Link",
          linkType: "ContentType",
          id: "course"
        }
      },
      locale: "en-US"
    },
    fields: {
      title: "API testing using Postman",
      slug: "api-testing-using-postman",
      image: {
        sys: {
          type: "Link",
          linkType: "Asset",
          id: "6n41KgxfwWmmeCiSemIsK2"
        }
      },
      shortDescription: "Cypress test to read a JSON file from Fixture folder.",
      description:
        "Api testing using postman. This is useful for testers.\n\npm.test()\n\nApi testing using postman. This is useful for testers. \n",
      duration: 3,
      skillLevel: "beginner",
      lessons: [
        {
          sys: {
            type: "Link",
            linkType: "Entry",
            id: "3op5VIqGZiwoe06c8IQIMO"
          }
        }
      ],
      categories: [
        {
          sys: {
            type: "Link",
            linkType: "Entry",
            id: "7JhDodrNmwmwGmQqiACW4"
          }
        }
      ]
    }
  },
  {
    sys: {
      space: {
        sys: {
          type: "Link",
          linkType: "Space",
          id: "pih85ghtkifg"
        }
      },
      id: "1ePcCVp2VzehrXpcSaq6aM",
      type: "Entry",
      createdAt: "2020-09-20T08:43:44.388Z",
      updatedAt: "2020-09-20T08:43:44.388Z",
      environment: {
        sys: {
          id: "master",
          type: "Link",
          linkType: "Environment"
        }
      },
      revision: 1,
      contentType: {
        sys: {
          type: "Link",
          linkType: "ContentType",
          id: "course"
        }
      },
      locale: "en-US"
    },
    fields: {
      title: "Cypress test to read a JSON file",
      slug: "cypress-test-to-read-a-json-file",
      image: {
        sys: {
          type: "Link",
          linkType: "Asset",
          id: "6n41KgxfwWmmeCiSemIsK2"
        }
      },
      shortDescription: "Cypress test to read a JSON file from Fixture folder.",
      description:
        "\nThis cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. \n\n> cy.get()\n\nThis cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. \n",
      duration: 3,
      skillLevel: "beginner",
      lessons: [
        {
          sys: {
            type: "Link",
            linkType: "Entry",
            id: "3op5VIqGZiwoe06c8IQIMO"
          }
        }
      ],
      categories: [
        {
          sys: {
            type: "Link",
            linkType: "Entry",
            id: "7JhDodrNmwmwGmQqiACW4"
          }
        }
      ]
    }
  }
];

const Home = () => {
  const [blogArticles, setBlogArticles] = useState([]);

  useEffect(() => {
    setBlogArticles(items);
  }, []);

  return (
    <div className="App">
      <div className="container">
        {blogArticles.map(
          ({
            sys: { id },
            fields: {
              title,
              image,
              shortDescription,
              description,
              skillLevel,
              duration
            }
          }) => (
            <div key={id} className="column-center">
              <article key={id} className="blogmaintile">
                <img
                  className="blogImage"
                  key={image}
                  src={image}
                  alt="myimg"
                ></img>
                <div className="blogtitle">
                  <span key={title}>{title}</span>
                </div>
                <section>
                  <p className="blogdescription" key={shortDescription}>
                    {shortDescription}
                  </p>
                </section>
                <section>
                  <p className="blogdescription" key={description}>
                    {description}
                  </p>
                </section>

                <section className="col2">
                  <a href="">
                    Read more {">"}
                    {">"}
                  </a>
                </section>
              </article>
            </div>
          )
        )}
      </div>
    </div>
  );
}
export default Home;

Answer 1

This is more of react/javascript. Please have a look at this.

You can easily achieve this with the help of bootstrap. Please have a look at collapse in bootstrap

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Answer 2

STEPS

1. Just add the link on the anchor tags.
2. Make sure your link contains some kind of id or an identifier of the content because you need to fetch the content using that identifier. Let take id here.

<section className="col2">
   <a href={slug}>
     Read more {">"}
    {">"}
  </a>
</section>

In you ContentDisplaySection,

1. Take the id from the url using react-router.
2. Use that id to fetch the content data.
3. After fetching the content data, show it to the user.

function ContentDisplay() {
   const [data, setData] = React.useState(null);
   const { id } = useParams(); // from react-router

  React.useEffect(() => {
      fetchContentData(id)
        .then(data => setData(data));
  });

  return <div>{content}</div>
}

App.js

function App() {
  return (
    <BrowserRouter>
      {" "}
      <Navigation />{" "}
      <Switch>
        {" "}
        <Route exact path="/" component={Home} />
        <Route path="/tutorials" component={Tutorials} />
        <Route path="/tutorialslist" component={TutorialsList} />
        <Route path="/content/:id" component={ContentDisplaySection} />
      </Switch>{" "}
    </BrowserRouter>
  );
}

NOTE :- you cannot pass content from your parent to child upon link change because upon refreshing the child page, the data is lost. The data passed from parent to child component doesn't persist between page refresh.