React - update object using useState hook

Question

i'm very new to react and i'm trying to update objects using useState hook but for some reason, I have no idea where to put it inside my splitArr function. The goal is to update the object via onClick event and pass the result into the table. Any help is greatly appreciated

const [result, setResults] = useState(
  [{ letters: 'John', numbers: 'john@example.com' }]
);   

 const lines= [     "1xM10                                                               87.31        0.00            0.00\r",
        "1xM14                                                                1.32        0.00            0.00\r",
        "1xM16+1xM14+1xM10                                                   15.38        0.00            0.00\r",
        "1xM14+3xM10                                                         12.52        0.00            0.00\r",
        "1xM14+5xM10                                                         16.12        0.00            0.00\r",
        "1xM14+7xM10                                                         16.36        0.00            0.00\r",
        "2xM10                                                               14.92        0.00            0.00\r",
        "2xM14                                                                8.86        0.00            0.00\r",
        "2xM14+11xM10                                                        35.77        0.00            0.00\r",
        "2xM14+2xM10                                                         24.98        0.00            0.00\r",
        "2xM14+4xM10                                                         29.79        0.00            0.00\r",
        "2xM14+6xM10                                                         45.61        0.00            0.00\r",
        "2xM14+9xM10                                                         16.17        0.00            0.00\r",
        "3xM10+4xM7                                                           9.66        0.00            0.00\r" ];
    
const splitArr = () => {
   const result = lines.reduce((a, c) => {
    const split = c.split(/[ ]+/);
  a.letters.push(split[0]);
  a.numbers.push(split[1]);
  return a;
}, { letters: [], numbers: [] });

const { letters, numbers } = result;

console.log(result.letters);
console.log(result.numbers);
console.log(result)
}

Answer 1

1. The state that you initialise is an Array<{ letters:string, numbers:string }> . However in your reduce function, you're returning an object: { letters: string, numbers: string }

2. Assuming that your state initialisation is correct and you want to push multiple objects into your state object, you could do the following:

const [result, setResults] = useState([{ letters: 'John', numbers: 'john@example.com' }])

const lines = [
  '1xM10                                                               87.31        0.00            0.00\r',
  '1xM14                                                                1.32        0.00            0.00\r',
  '1xM16+1xM14+1xM10                                                   15.38        0.00            0.00\r',
  '1xM14+3xM10                                                         12.52        0.00            0.00\r',
  '1xM14+5xM10                                                         16.12        0.00            0.00\r',
  '1xM14+7xM10                                                         16.36        0.00            0.00\r',
  '2xM10                                                               14.92        0.00            0.00\r',
  '2xM14                                                                8.86        0.00            0.00\r',
  '2xM14+11xM10                                                        35.77        0.00            0.00\r',
  '2xM14+2xM10                                                         24.98        0.00            0.00\r',
  '2xM14+4xM10                                                         29.79        0.00            0.00\r',
  '2xM14+6xM10                                                         45.61        0.00            0.00\r',
  '2xM14+9xM10                                                         16.17        0.00            0.00\r',
  '3xM10+4xM7                                                           9.66        0.00            0.00\r',
]
const splitArr = () => {
  const reducedLines = lines.reduce(
    (a, c) => {
      const split = c.split(/[ ]+/)
      a.letters.push(split[0])
      a.numbers.push(split[1])
      return a
    },
    { letters: [], numbers: [] },
  )

  setResult((prevState) => ([...prevState, reducedLines]))
}

A good reference to read up on is the useState section of the React docs