import { useState} from "react";
import "./Comp1.css";
const Comp1 =()=>{
const [str] = useState(`Hello`);
const [num] =useState(100);
const [bool] = useState(true);
const [obj]= useState({"key1":"hello_1....","key2":"hello_2...","key3":"hello_3.."});
const[arr] = useState([10,20,30,40,50]);
const[arr1]= useState([`hello_1`,`hello_2`,`hello_3`,`hello_4`,`hello_5`]);
const [arr2] =useState([100,200,300,400,500]);
const [arr3]= useState([`reactJs`,`MongoDb`,`NodeJs`]);
const [arr4] = useState([100,`hello1`,200,`hello2`]);
return(
<>
<h1>{str}</h1>
<h1 className="class-one">{num}</h1>
<h1 id="id-one">{JSON.stringify(bool)}</h1>
<h1>{obj.key1}{obj.key2}{obj.key3}</h1>
{arr.map((Element,index)=>{
return(
<h1 key={index}>{Element}....{index}</h1>
)
})
}
{arr1.map((Element,index)=>{
return(
<h1 key={index}>{Element}....{index}</h1>
)
})
}
{arr2.map((Element,index)=>{
return(
<h1 key={index}>{Element}....{index}</h1>
)
})
}
{arr3.map((Element,index)=>{
return(
<h1 key={index}>{Element}....{index}</h1>
)
})
}
{arr4.map((Element,index)=>{
return(
<h1 key={index}>{Element}....{index}</h1>
)
})
}

</>
)
}
export default Comp1;

Hello
100
true
hello_1....hello_2...hello_3..
10....0
20....1
30....2
40....3
50....4
hello_1....0
hello_2....1
hello_3....2
hello_4....3
hello_5....4
100....0
200....1
300....2
400....3
500....4
reactJs....0
MongoDb....1
NodeJs....2
100....0
hello1....1
200....2
hello2....3

h1{
color: red;
}
.class-one{
color: green;
}
#id-one{
color: blue;
}
h2{
color: yellowgreen;
}
h3{
color: red;
}
h4{
color: violet;
}

import { useState} from "react";
import "./Comp1.css";
const Comp1 =()=>{
const [str] = useState(`Hello`);
const [num] =useState(100);
const [bool] = useState(true);
const [obj]= useState({"key1":"hello_1....","key2":"hello_2...","key3":"hello_3.."});
const[arr] = useState([10,20,30,40,50]);
const[arr1]= useState([`hello_1`,`hello_2`,`hello_3`,`hello_4`,`hello_5`]);
const [arr2] =useState([100,200,300,400,500]);
const [arr3]= useState([`reactJs`,`MongoDb`,`NodeJs`]);
const [arr4] = useState([100,`hello1`,200,`hello2`]);
const [products] = useState([
{"p_id":111,"p_name":"p_1","p_cost":10000},
{"p_id":222,"p_name":"p_2","p_cost":20000},
{"p_id":333,"p_name":"p_3","p_cost":30000},
{"p_id":444,"p_name":"p_4","p_cost":40000},
{"p_id":555,"p_name":"p_5","p_cost":50000}
]);
return(
<>
<h1>{str}</h1>
<h1 className="class-one">{num}</h1>
<h1 id="id-one">{JSON.stringify(bool)}</h1>
<h1>{obj.key1}{obj.key2}{obj.key3}</h1>
{arr.map((Element,index)=>{
return(
<h1 key={index}>{Element}....{index}</h1>
)
})
}
{arr1.map((Element,index)=>{
return(
<h2 key={index}>{Element}....{index}</h2>
)
})
}
{arr2.map((Element,index)=>{
return(
<h3 key={index}>{Element}....{index}</h3>
)
})
}
{arr3.map((Element,index)=>{
return(
<h4 key={index}>{Element}....{index}</h4>
)
})
}
{arr4.map((Element,index)=>{
return(
<h5 key={index}>{Element}....{index}</h5>
)
})
}

<table border={1}>
<tr>
<th>p_id</th>
<th>p_name</th>
<th>p_cost</th>
</tr>
{products.map((element,index)=>{
return(
<tr key={index}>
<td>{element.p_id}</td>
<td>{element.p_name}</td>
<td>{element.p_cost}</td>
</tr>
)
})
}
</table>
</>
)
}
export default Comp1;

h1{
color: red;
}
.class-one{
color: green;
}
#id-one{
color: blue;
}
h2{
color: yellowgreen;
}
h3{
color: red;
}
h4{
color: violet;
}
table{
color: blueviolet;
border: tomato;
width: 300px;
height: 200px;
}

import { useState} from "react";
import "./Comp1.css";
const Comp1 =()=>{
const [str] = useState(`Hello`);
const [num] =useState(100);
const [bool] = useState(true);
const [obj]= useState({"key1":"hello_1....","key2":"hello_2...","key3":"hello_3.."});
const[arr] = useState([10,20,30,40,50]);
const[arr1]= useState([`hello_1`,`hello_2`,`hello_3`,`hello_4`,`hello_5`]);
const [arr2] =useState([100,200,300,400,500]);
const [arr3]= useState([`reactJs`,`MongoDb`,`NodeJs`]);
const [arr4] = useState([100,`hello1`,200,`hello2`]);
const [products] = useState([
{"p_id":111,"p_name":"p_one","p_cost":10000},
{"p_id":222,"p_name":"p_two","p_cost":20000},
{"p_id":333,"p_name":"p_three","p_cost":30000},
{"p_id":444,"p_name":"p_four","p_cost":40000},
{"p_id":555,"p_name":"p_five","p_cost":50000}
]);
const [Employee] = useState([
{"e_id":111,"e_name":"e_one","e_sal":10000},
{"e_id":222,"e_name":"e_two","e_sal":20000},
{"e_id":333,"e_name":"e_three","e_sal":30000},
{"e_id":444,"e_name":"e_four","e_sal":40000},
{"e_id":555,"e_name":"e_five","e_sal":50000}
]);
return(
<>
<h1>{str}</h1>
<h1 className="class-one">{num}</h1>
<h1 id="id-one">{JSON.stringify(bool)}</h1>
<h1>{obj.key1}{obj.key2}{obj.key3}</h1>
{arr.map((Element,index)=>{
return(
<h1 key={index}>{Element}....{index}</h1>
)
})
}
{arr1.map((Element,index)=>{
return(
<h2 key={index}>{Element}....{index}</h2>
)
})
}
{arr2.map((Element,index)=>{
return(
<h3 key={index}>{Element}....{index}</h3>
)
})
}
{arr3.map((Element,index)=>{
return(
<h4 key={index}>{Element}....{index}</h4>
)
})
}
{arr4.map((Element,index)=>{
return(
<h5 key={index}>{Element}....{index}</h5>
)
})
}
<table border={1}>
<tr>
<th>p_id</th>
<th>p_name</th>
<th>p_cost</th>
</tr>
{products.map((element,index)=>{
return(
<tr key={index}>
<td>{element.p_id}</td>
<td>{element.p_name}</td>
<td>{element.p_cost}</td>
</tr>
)
})
}
</table>
<table border={1}>
<tr>
<th>e_id</th>
<th>e_name</th>
<th>e_sal</th>
</tr>
{Employee.map((element,index)=>{
return(
<tr key={index}>
<td>{element.e_id}</td>
<td>{element.e_name}</td>
<td>{element.e_sal}</td>
</tr>
)
})
}
</table>
</>
)
}
export default Comp1;

e_id e_name e_sal
111 e_one 10000
222 e_two 20000
333 e_three 30000
444 e_four 40000
555 e_five 50000

Module-2-T1.docx

Solve this

import {useState} from "react";
import Child from "./Child";
const Parent = ()=>{
const [str]= useState(`hello`);
const [num]= useState(100);
const [bool]= useState(true);
return(
<>
<Child key1= {str} key2 ={num} key3 ={bool}></Child>
</>
)
}
export default Parent;

const Child =(props)=>{
return(
<>
<h1>{props.key1}</h1>
<h2>{props.key2}</h2>
<h3>{JSON.stringify(props.key3)}</h3>
</>
)
}
export default Child;

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Parent from "./Parent";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Parent />
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Pass String , name ,Boolean ,json object , number array , String array , Array of object from parent component to child component

Pass above data from parent component to child component and child component to sub child component

Everyone must join this tomorrow 😊

Don't miss to join

Tomorrow @9am we will discuss css in lab