Project/projectreact/src/pages/projects.js

import { connect } from "react-redux";
import { Link } from "react-router-dom";

const Projects = ({ snippets }) => {
  return  snippets  ? (
    <div>
        <Link to ="/"><button className = 'float-left btn-secondary d-inline-block mt-2 ml-2'>Back to Main Page</button></Link> <br/> <br/>
      {snippets?.map((key, index) => (
        <div style ={{textAlign:'center' , alignItems:'center'}}>
          <div className="card w-50 ml-auto mr-auto mt-3 mb-5"  >
            <div className="card-body" style ={{textAlign:'center'}}>
                <h3 className="card-title mb-4 text-info">{snippets?.[index]?.title || "Project without name"}</h3>   
              <p className="card-text">
                  <span className = 'text-muted'>Description</span>&nbsp; 
              {snippets?.[index]?.description || ""} 
              </p>
              <Link to = {'/project/' + snippets?.[index]?._id}>
              <button className="btn btn-primary mt-3"  >
                Open project
                </button>  
                </Link>
            </div>
          </div>
        </div>
      ))}
    </div>
  ) : (
    <div>
    <Link to ="/"><button className = 'float-left btn-secondary d-inline-block mt-2 ml-2'>Back to Main Page</button></Link> <br/> <br/>
    <div className="d-flex justify-content-center">
    <div className="spinner-border mt-3" style={{width: "10rem" ,  height: "10rem"}} role="status">
      <span className="sr-only">Loading...</span>
    </div>
  </div>
  </div>
  );
};

const CProjects = connect(state => ({
  snippets: state?.promise?.findSnippet?.payload?.data?.SnippetFind
}))(Projects);
export default CProjects;