📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
In this chapter, we will learn:
React state
Creating the state Object
import React, { Component } from 'react'
class StudentComponent extends Component {
constructor(props) {
super(props)
this.state = {
firstName: "Ramesh"
}
}
render() {
return (
<div>
<h1> Hello Student</h1>
</div>
)
}
}
export default StudentComponent
import React, { Component } from 'react'
class StudentComponent extends Component {
constructor(props) {
super(props)
this.state = {
firstName: "Ramesh",
lastName:"Fadatare",
rollNo: 123,
age: 20,
books: ["C programming", "C++ programming", "Data Structure and Algorithms"]
}
}
render() {
return (
<div>
<h1> Hello Student</h1> <hr/>
</div>
)
}
}
export default StudentComponent
Using the state Object
this.state.propertyname
import React, { Component } from 'react'
class StudentComponent extends Component {
constructor(props) {
super(props)
this.state = {
firstName: "Ramesh",
lastName:"Fadatare",
rollNo: 123,
age: 20,
books: ["C programming", "C++ programming", "Data Structure and Algorithms"]
}
}
render() {
return (
<div>
<h1> Student Details</h1> <hr/>
<h3> First Name: {this.state.firstName }</h3>
<h3> Last Name: {this.state.lastName }</h3>
<h3> Roll No: {this.state.rollNo } </h3>
<h3> Age: {this.state.age }</h3>
<h3> {this.state.books} </h3>
</div>
)
}
}
export default StudentComponent
import React from 'react';
import logo from './logo.svg';
import './App.css';
import StudentComponent from './components/StudentComponent';
function App() {
return (
<div className="App">
<header className="App-header">
<StudentComponent />
</header>
</div>
);
}
export default App;
Hit URL http://localhost:3000/ in Browser
Changing the state Object using setState() Method
import React, { Component } from 'react'
class StudentComponent extends Component {
constructor(props) {
super(props)
this.state = {
firstName: "Ramesh",
lastName:"Fadatare",
rollNo: 123,
age: 20,
books: ["C programming", "C++ programming", "Data Structure and Algorithms"]
}
}
updateStudent(){
this.setState({
rollNo: 124,
age: 21
})
}
render() {
return (
<div>
<h1> Student Details</h1> <hr/>
<h3> First Name: {this.state.firstName }</h3>
<h3> Last Name: {this.state.lastName }</h3>
<h3> Roll No: {this.state.rollNo } </h3>
<h3> Age: {this.state.age }</h3>
<h3> {this.state.books} </h3>
<button type="button" onClick={() => this.updateStudent()} >Update Student Details</button>
</div>
)
}
}
export default StudentComponent
What's Next?
❮ Previous Chapter Next Chapter ❯
Comments
Post a Comment
Leave Comment