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]);
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>
)
})
}
</>
)
}
export default Comp1;

h1{
color: red;
}
.class-one{
color: green;
}
#id-one{
color: blue;
}

{arr1.map((Element,index)=>{
return(
<h1 key={index}>{Element}....{index}</h1>
)
})
}

const[arr1]= useState([`hello_1`,`hello_2`,`hello_3`]);

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`]);
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>
)
})
}

</>
)
}
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

Array calling

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;