Update state with value from button element onClick - reactjs

Question

I have some code below where I have decalared state in my parent component for size as an empty string.
What I am trying to do is create a handler function that will take the innerText of a button onClick and update the state of size with that value.
import { Child } from './Child';
import React, { useState } from 'react';
export default function Parent() {
const [state, setState] = useState({
name: 'bob',
size: '',
});
const handleSize = (e) => {
setState((state) => ({
...state,
size: e.target.innerText,
}));
};
return (
<Child
size={state.size}
onClick={handleSize}
/>
);
}
Here is the child component with the button that has innerText of 500. - I simply want to set the state of size to whatever value is inside my button element but this does not seem to work.
EDIT1: updated code to send size down to the child.
EDIT2: this current code throws a TYPE ERROR: 'Cannot read property 'innerText' of null' Is this because getting innerText of JSX elements is different than HTML elements?
EDIT3: I have answered my own question below. My handler function required adjustments.
export const Child = ({
size,
onClick,
}) => {
return (
<div>
<button onClick={onClick}>500</button>
</div>
);
};

Answer 1

Try:
const handleSize = (e) => {
setState((state) => ({
...state,
size: e.target.innerText,
}))
}
https://reactjs.org/docs/hooks-reference.html#functional-updates

Answer 2

Ok found the issue, my handler function needed some adjustments.
const handleSize = (e) => {
const { value } = e.target;
setState((state) => ({
...state,
size: value,
}));
};
Instead of using the innerText of the button I decided to use value instead.
const { value } = e.target; //assigns the target value to my size property
Below is the updated button that has a static value of "500". The handleSize function will update the size onClick using the assigned value of the button.
export const Child = ({
size,
onClick,
}) => {
return (
<div>
<button value="500" onClick={onClick}>500</button>
</div>
);
};