okay so here is my app.jsx:

import { useState } from "react";
import "./index.css";
import "./App.css";
import Card from "./Card.jsx";
import About from "./About.jsx";
import Header from "./Header.jsx";

function App() {
  const properties = {
    language: "Javascript",
    framework: "React",
    skills: ["HTML", "CSS", "JavaScript"],
  };
  const cardStyles = [
    { backgroundColor: "blue" },
    { backgroundColor: "green" },
    { backgroundColor: "black" },
    { backgroundColor: "red" },
  ];

  return (
    <>
      <Header />
      <About styles={cardStyles} />
      <Card />
    </>
  );
}

export default App;

and then here is my About.jsx that i want to pass props to, both the cardStyles containing css styles so that the backgroundColor will be changeable for every instance of Card and also the skill prop, but for some reason i managed to make the skill prop work, but not the cardStyles thingy

import React from "react";
import Card from "./Card.jsx";
function About(props) {
  const About = ({ styles }) => {};

  return (
    <div>
      <p>
        Frontend developer with a passion for building beautiful, functional and
        dynamic websites
      </p>
      <Card className="card1" skill="HTML" styles={props.styles[0]} />
      <Card className="card2" skill="CSS" />
      <Card className="card3" skill="JavaScript" />
      <Card className="card4" skill="React" styles={props.cardStyles[0]} />
      <Card className="card5" skill="Node.js" styles={props.cardStyles[1]} />
    </div>
  );
}
export default About;

and lastly here is the Card.jsx component:

import React from "react";

function Card(props) {
  return (
    <>
      <div className="card">
        <div>
          {props.skill} {props.cardStyles}
        </div>
      </div>
    </>
  );
}
export default Card;

And again, nothing is working as of right now with each component looking like this

I tried passing the props to About.jsx and Card.jsx, i expected things to work, i.e i expected to be able to define in each card your textcomponent instance which background color each div would have and which skill to display, but that’s not what happened. The actual result is a blank page, no errors, just a blank page.