change my title's color with ReactJs

Rachida — Wed, 13 Jul 2022 12:18:13 +0000

hello i don't want doesn't work in my code, i would like to put the color green on my title and it does not work , please tell me what is wrong with my code

import React, { Component } from "react";
import { Mycars } from "./components/Mycars";
import "./App.css";

class App extends Component {
  state = {
    titre: "Mon catalogue de voitures",
    color: "green",
  };
  render() {
    return (
      <div className="App">
        <Mycars
          style={{ color: "red" }}
          color={this.state.color}
          title={this.state.titre}
        />
      </div>
    );
  }
}

export default App;

function Wrapper({ children }) {
  return (
    <div
      style={{
        backgroundColor: "pink",
        width: "400px",
        padding: "10px",
        margin: "5px auto",
      }}
    >
      {children}
    </div>
  );
}

export default Wrapper;

import React, { Component } from "react";
import Car from "./Cars";
import MyHeader from "./MyHeader";
import Wrapper from "./Wrapper";

export class Mycars extends Component {
  state = {
    cars: ["Ford", "Mercedes", "Peugeot"],
  };
  render() {
    return (
      <div>
        <Wrapper>
          <MyHeader myStyle={this.props.color}>{this.props.title}</MyHeader>
        </Wrapper>

        <Car color="red">{this.state.cars[0]}</Car>
        <Car>{this.state.cars[1]}</Car>
        <Car color="yellow">{this.state.cars[2]}</Car>
      </div>
    );
  }
}

const MyHeader = ({ myStyle, children }) => (
  <h1 style={{ color: { myStyle } }}>{children}</h1>
);

export default MyHeader;

import Wrapper from "./Wrapper";

const Car = ({ children, color }) => {
  let colorInfo = "";

  if (color) {
    colorInfo = color;
  } else {
    colorInfo = "Néant";
  }

  return (
    children && (
      <Wrapper>
        <p>Marque: {children} </p>
        <p>Couleur: {colorInfo} </p>
      </Wrapper>
    )
  );
};

export default Car;

DEV Community: Rachida

change my title's color with ReactJs