In React Using Hook (useState) How i can add new row Like This Pattren?

Question

how i can add more arrays in use state when i add a array by using a setAddtaskv array will be add but format is not true

import react,{useState,useEffect} from 'react'

const  App = () => {


  const [addtaskV,setAddtaskv] = useState([
    { id: 1, title: "Alabama",text:"Test" },
    { id: 2, title: "Georgia",text:"Test" },
    { id: 3, title: "Tennessee",text:"Test" }
  ]);


  const addTask = () =>
  {
    const title = document.getElementById('title').value;
    const text = document.getElementById('text').value;
  }


  return (
    <div>
      <input type="text" placeholder="Title" id="title"/>
      <input type="text" placeholder="Write some text" id="text" />
      <button onClick={addTask}>Add</button>
     </div>
  );`enter code here`
}

export default App;

And to get form data, [React offers better ways to do it](https://stackoverflow.com/q/23427384/1218980). — Emile Bergeron, Sep 27 '21 at 15:43

score 1 · Accepted Answer · answered Sep 27 '21 at 15:45

On your addTask you could do this

const addTask = () => {
  const title = document.getElementById("title").value;
  const text = document.getElementById("text").value;

  setAddtaskv((previousState) => [
    ...previousState,
    { id: addtaskV.length + 1, title: title, text: text }
  ]);
};

The spread on ...previousState means that you get whatever is already inside there and you add your new object to it.

Here's the full component

import react, { useState, useEffect } from "react";

const App = () => {
  const [addtaskV, setAddtaskv] = useState([
    { id: 1, title: "Alabama", text: "Test" },
    { id: 2, title: "Georgia", text: "Test" },
    { id: 3, title: "Tennessee", text: "Test" }
  ]);

  const addTask = () => {
    const title = document.getElementById("title").value;
    const text = document.getElementById("text").value;

    setAddtaskv((previousState) => [
      ...previousState,
      { id: addtaskV.length + 1, title: title, text: text }
    ]);
  };

  return (
    <>
      <div>
        <input type="text" placeholder="Title" id="title" />
        <input type="text" placeholder="Write some text" id="text" />
        <button onClick={addTask}>Add</button>
      </div>
      {addtaskV.map((task) => (
        <div>
          <span>
            {task.id} - {task.title} - {task.text}
          </span>
        </div>
      ))}
    </>
  );
};

export default App;

EDIT: I also suggest that you do some research on how to properly develop React forms. Although your solution works, there are better ways of doing it. But you seem to be doing well

A.Anvarbekov · Answer 2 · 2021-09-28T01:15:19.813

This is the general and correct way to do this in React JS

 const [item, setItem] = useState({title: '', text: '', id: 0})
 const [data, setData] = useState([])
  
 // get inputs values
 const handleInput = ({name, value}) => {
  setItem({...item, [name]:value, id:data.length})
 }

 // new item object to `data`
 const submit = () => {
   if(item.title === '' || item.text === ''){
    console.log('Please, fill empty spaces')
   }else{
    setData({...data, item})
   }
 }

 <input value={item.title} name='title'
        onChange={(e)=>handleInput(e.target)} />
 <input value={item.text} name='text'
        onChange={(e)=>handleInput(e.target)} />
 <button onclick={()=>submit()}>Add new</button>

// render to screen
 data && 
 data.map(({title, text, id}) => <div key={id}>
                                  <h1>{title}</h1>
                                  <p>{text}</p>
                                 </div>)

Please, do not use DOM Manipulation in React if not crucial

I am newly learn react so thank u for answer – Noman Laghari Sep 27 '21 at 17:10 — Noman Laghari, Sep 27 '21 at 17:10

In React Using Hook (useState) How i can add new row Like This Pattren?

2 Answers2