React - 3

Chapter-17 PropsTypes
====================
Step-1 :- App.js
=========================
import React, { Component } from 'react'
import { PropTypes } from "prop-types";
export default class App extends Component {

constructor(props)
{
super(props);
this.state={
roll:this.props.id,
name:this.props.name
}
}
render() {
return (
<div>
<h1>Roll No : {this.state.roll}</h1>
<h1>Roll No : {this.state.name}</h1>
</div>
)
}
}
App.PropTypes={
id:PropTypes.number.isRequired,
name:PropTypes.string.isRequired
}
Step-2 :- index.js
===================================
import React from "react";

import {createRoot} from "react-dom/client";
import App from "./App";
const container = document.getElementById("root");

const data = createRoot(container);
const eid ="101";

const ename = "Nani";
data.render(<App id={eid} name={ename}/>);
Chapter-18 Default PropTypes

============================
Step-1 App.js
-------------------

constructor(props)
{
super(props);
this.state={
roll:this.props.id,
name:this.props.name
}
}
render() {
return (
<div>
<h1>Name is : {this.state.name}</h1>
</div>
)
}
}
App.propTypes={
}
App.defaultProps={
id:501,
name:"Nani"
}
Step-2 :- index.js
===================================


const eid ="101";

const ename = "Nani";
data.render(<App id={eid} name={ename}/>);
Chapter -19 Children

====================================
Step-1 App.js
--------------------------


constructor(props)
{
super(props);
this.state={
roll:501,
name:"King"
}
}
render() {
return (
<div>
<h1>Data : {this.props.children}</h1>
</div>
)
}
}
App.propTypes={
}
App.defaultProps={
id:501,
name:"Nani"
}
Step-2 Index.js
-----------------------------

const ename = "Nani"

data.render(<App>My name is : {ename}</App>);
Chapter-20 :- Changing State Properties

===============================
Step-1 App.js
-------------------

constructor(props)
{
super(props);
this.state={
roll:501,
name:"King"
}
}
dataclick=()=>{
this.setState({roll:101,name:"Nani"})
}
render() {
return (
<div>
<button onClick={this.dataclick}>Click Me</button>
</div>
)
}
}
Step-2 Index.js
--------------------

data.render(<App/>);

================================
Step-1 App.js
--------------------

constructor(props)
{
super(props);
this.state={
ticket:0
}
}
dataclick=()=>{
this.setState({ticket:this.state.ticket+1})
}
render() {
return (
<div>
<h1>Book Movie Tickets : {this.state.ticket}</h1>

<button onClick={this.dataclick}>Click Me</button>
</div>
)
}
}
Step-2 Index.js
------------------------



===============================
Step-1 App.js
-------------------

import "./index.css"

constructor(props)
{
super(props);
this.state={
ticket:0
}
}
dataclick1=()=>{
this.setState({ticket:this.state.ticket+1})
}
dataclick2=()=>{
this.setState({ticket:this.state.ticket-1})
}
render() {
return (
<div>
<h1>Book Movie Tickets : {this.state.ticket}</h1>

<button className='b1' onClick={this.dataclick1}>+</button>
<button className='b1' onClick={this.dataclick2}>-</button>
</div>
)
}
}
Step-2 Index.js
------------------------


Chapter -23 :- Reading State & Props Properties

====================================
Step-1 App.js
------------------

import "./index.css"

constructor(props)
{
super(props);
this.state={
roll:501,
City:"Hyd"
}
}
dataclick1=()=>{
( ()=>{
console.log(this.state);
console.log(this.props);
}) ();
}
render() {
return (
<div>
<button className='b1' onClick={this.dataclick1}>ClickMe</button>

</div>
)
}
}
Step-2 Index.js
------------------------



React - 3

Uploaded by

Document Informationclick to expand document informationreact-3

Document Informationclick to expand document information

Copyright:

Available Formats

React - 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

React - 3

Uploaded by

Copyright:

Available Formats

Chapter-17 PropsTypes

export default class App extends Component {

import React from "react";

const container = document.getElementById("root");

const eid ="101";

Chapter-18 Default PropTypes

export default class App extends Component {

import React from "react";

const container = document.getElementById("root");

const eid ="101";

Chapter -19 Children

import React, { Component } from 'react'

export default class App extends Component {

const container = document.getElementById("root");

const ename = "Nani"

Chapter-20 :- Changing State Properties

export default class App extends Component {

const container = document.getElementById("root");

Chapter-21 :- Changing State Properties

export default class App extends Component {

<h1>Book Movie Tickets : {this.state.ticket}</h1>

import React from "react";

const container = document.getElementById("root");

Chapter-22 :- Changing State Properties

import React, { Component } from 'react'

export default class App extends Component {

<h1>Book Movie Tickets : {this.state.ticket}</h1>

import React from "react";

const container = document.getElementById("root");

Chapter -23 :- Reading State & Props Properties

import React, { Component } from 'react'

export default class App extends Component {

<button className='b1' onClick={this.dataclick1}>ClickMe</button>

import React from "react";

const container = document.getElementById("root");

You might also like