xxxxxxxxxx
// These two are equivalent in JSX for disabling a button
<input type="button" disabled />;
<input type="button" disabled={true} />;
// And these two are equivalent in JSX for not disabling a button
<input type="button" />;
<input type="button" disabled={false} />;
xxxxxxxxxx
import React from "react";
import ReactDOM from "react-dom";
function App() {
return <Greeting name="Nathan" />;
}
function Greeting(props) {
return (
<p>
Hello! I'm {props.name}, a {props.age} years old {props.occupation}.
Pleased to meet you!
</p>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
xxxxxxxxxx
function Parent({children}) {
return (
<div>
{children}
</div>
);
}
export default function App() {
const Title = () => {
return <h2>Hello world</h2>;
};
return (
<div>
<Parent>
<Title />
</Parent>
</div>
);
}
xxxxxxxxxx
//parent
const Parent = ({ children }) => {
const [checked, setChecked] = useState(false);
const allChildren = React.Children.map(children, (child) => {
const clone = React.cloneElement(child, {
checked,
setChecked,
});
return clone;
});
return allChildren;
};
//child
const Child = ({ checked, setChecked }) => {
return (
<div onClick={() => setChecked(!checked)} style={{ color: "red" }}>
child content
</div>
);
};
//app
<Parent>
<Child />
</Parent>
xxxxxxxxxx
const Header = (props) => {
return (
<header>
<h1>{props.title}</h1>
</header>
)
}
export default Header