DEV Community

Rachida
Rachida

Posted on

change my title's color with ReactJs

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;

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
wjplatformer profile image
Wj

Here's a gentle tip when asking people questions. Firstly, you have to put tags if not people won't see you. Such as the 'help' tag
tags
Secondly, send Screenshots of your product (like your website that does not work) as it would help in decomposition of the problem. Right now, I cant really tell what's the problem 🤔