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;
Top comments (1)
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

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 🤔