Absolute Beginners: React State & Props

import {childComponent} from ‘./components/childComponent’ class parentComponent extends React.Component {
...
render() {
return (
<childComponent name=“First Child!” />
);
}
}
export default parentComponent
const childComponent = (props) => {return <p>{prop.name}</p>;}
class ParentComponent extends Component {
//1st option initialize state object (more modern syntax)
state = {
name: "Ginny"
}
//2nd option to intialize state object by adding the class constructor that assigns the initial this.state
constructor(props) {
super(props);
this.state = {name: "Ginny"};
}
// Here we went from mounting to updating by the time our flow of data approaches the render() method. From here we can print out what we expect to appear on the webpage
// the render()'s return() will need this () to support JSX's span over multiple lines now, with an enclosing <div> tag for React expects only a single element returned
render() {
return(
<div>
<h1>What's your name?</h1>
<h2>My name is {this.state.name}</h2>.
{ /* //or try this */}
<h2>My name is {this.props.name}</h2>.
<div/> )
}
}
export default ParentComponent
//wrong approach to modify state
this.state.id = “2222”;
//CORRECT approach to modify state
this.setState({id: “2020”});
const childComponent = (props) => {return <p>{prop.name}</p>;}
import {childComponent} from ‘./components/childComponent’ 
class parentComponent extends React.Component {
...
render() {
return (
<childComponent name=“First Child!” />
);
}
}
React Component Lifecyce Methods Diagram Link

--

--

multilingual Software Engineer, always learning and growing.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Toni T Diep

Toni T Diep

multilingual Software Engineer, always learning and growing.