State

<aside> 💡 State is always dynamic

</aside>

To define a state for a variable in React.js we use the function body for the initializations, declarations.

We can use the state of variables in the return

import './App.css'
function App() {
  let username = 'pavan'
  return (
    <>
      <div>
        <h1>Welcome</h1>
        <h2>{username}</h2>
      </div>
    </>
  )
}
export default App

The variables are accessed as { varName }

Access the Elements in the Array in React → Using map()

In order to traverse an list / array, we use map function to map the index(key) to the element.

function App() {
  let skills = ['React', 'Vue', 'Angular', 'Svelte']
  return (
    <>
      <div>
        {
          skills.map((skill, index) => (
            <p key={index}>{skill}</p>
          ))
        }
      </div>
    </>
  )
}

More about Map and Arrays: map

Access the Elements in the Object in React

function App() {
  //object
  let person = {
    name: 'pavan',
    age:19,
    pid: 1234
  }
  return (
    <>
      <div>
        <h1>{person.name}</h1>
        <h1>{person.age}</h1>
        <h1>{person.pid}</h1>
      </div>
    </>
  )
}

Access the Data in the Array of Objects in React

function App() {
  //array of objects
  let person = [
    {
      name: 'pavan',
      age: 19,
      pid: 1234
    },
    {
      name: 'kumar',
      age: 20,
      pid: 1235
    },
    {
      name: 'vignesh',
      age: 21,
      pid: 1236
    }
  ]
  return (
    <>
    <div>
      <table border="1">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>PID</th>
          </tr>
        </thead>
        <tbody>
          {person.map((p, index) => (
            <tr key={index}>
              <td>{p.name}</td>
              <td>{p.age}</td>
              <td>{p.pid}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
    </>
  )
}

https://renderinglists.vercel.app/