Example_1:

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;
}