Unable to Update the details in the UI on Button Click using React

Question

I am Having the Names in the table , So now I want to reverse the names(Reverse a String) and I want to update the names that in the UI So, I have one function to reverse the names in table and It is working fine , When I console log it, I am getting the Reversed names...But I am Unable to update that in the UI... Can Anyone please help me out in this...Thanks in Advance

const Arraymethods1 = () => {

      const [data, setdata] = useState([]);
      const [getData, setgetData] = useState([{}]);



      useEffect(() => {
        Axios.get('http://localhost:3000/results').then(res =>{
                  setdata(res.data);
                  const tempArray=[];
                  let allData =res.data;
                  //console.log(allData);
                  for(let i=0;i<allData.length;i++){
                       //console.log(allData[i])
                       const dataObject ={
                           name : `${allData[i].name.first}-${allData[i].name.last}`,
                           price : allData[i].price.money.wealth
                       }
                      // console.log(dataObject);
                      tempArray.push(dataObject);
                      //console.log(tempArray);
                  }
                  setgetData(tempArray);
            })
      }, [])

Thsi is the Function to revesre the names

    const RevereName =() =>{
         //console.log(getData);
         for(let i=0;i<getData.length;i++){
             let reversing =getData[i].name;
               //console.log(reversing);
               let rev ="";
               for(let i=reversing.length-1;i>=0;i--){
                    rev+=reversing[i];
  
               }
               console.log(rev);
                setgetData([rev]);
              
         }

     }

    return (
        <React.Fragment>
            <h1 className="text-info m-3 true">LordShiva</h1>
      <div className="container">
        <div className="card">
          <div className="row">
            <div className="col md-col-4">
              <div className="card-header font-weight-bold text-centre getsome">ArrayButtons</div>
              <div className="bg-dark text-centre">
                <button className="btn btn-warning" onClick={RevereName}  >Reverse</button>
              </div>
            </div>
            <div className="col md-col-6">
              <div className="card-header font-weight-bold text-centre getsome">ArrayValues</div>
              <div className="table bg-dark">
                {/* <p className="text-primary font-weight-bold p-3 md-col-6 shaping">Person</p>
                <p className="text-primary font-weight-bold p-3  md-col-6 shape">Wealth</p> */}

                <table className="table">
                  <thead className="text-primary p-3 shaping ">
                    <tr>
                      <th><strong>Person</strong></th>
                      <th><strong>Wealth</strong></th>
                    </tr>
                  </thead>
                  <tbody>
                  <div className="text-primary">
                   <tr>
                          {
                              getData.map((user)=>{
                                       return (
                                        <div>
                               <td className="font-weight-bolder text-capitalize">{user.name}</td>
                           <td className="font-weight-bolder treu">{user.price}</td>
                   </div>               
                                       )
                              })
                          }
                  </tr>
                </div>
                  </tbody>
                <p className="text-primary font-weight-bolder p-3" ><strong>Total Wealth</strong>{total}</p>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
        </React.Fragment>
    )
}
 

Answer 1

getData is an array of Objects, not an array of strings. If you set it to an array of strings, user.name and user.price will be undefined.

So a fix would be

const RevereName=()=>{
let getData2=[];
for(let i=0;i<getData.length;i++){
             let reversing =getData[i].name;
               //console.log(reversing);
               let rev ="";
               for(let i=reversing.length-1;i>=0;i--){
                    rev+=reversing[i];
  
               }
               console.log(rev);
               getData2.push({name: rev, price: getData[i].price});
         }
         setgetData([...getData2]);
}