can you try to show us the pure function state this topic was only thought in class function
None of the examples in this tutorial use component state, so its just a matter of making render your pure function and changing this.props
to props
where props
is the first parameter of the function.
For example:
class Letter extends React.Component {
render() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: "#ffde00",
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return(
<div style={letterStyle}>
{this.props.children}
</div>
);
}
}
would be
function Letter (props) {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: "#ffde00",
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return(
<div style={letterStyle}>
{props.children}
</div>
);
}
There is a problem in the code
class Letter extends React.Component {
render() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: “#FFDE00”,
color: “#333”,
display: “inline-block”,
fontFamily: “monospace”,
fontSize: 32,
textAlign: “center”
};
return (
<div>
{this.props.children}
</div>
);
}
}
It is missing this
<div style={letterStyle}> in the book
Unfortunately, that is a mistake that slipped through. You can see this and other errors called out here: https://www.kirupa.com/react/errata.htm
Cheers,
Kirupa