Accepted answer

Wow, this was a doozy. The ultimate problem stems from the fact that you're calling the following component:

export default function FormsByAudience(props: FormsByAudienceProps) {
  const [critics, setCritics] = useCritics(props.books);

  const setCritic = (index: number) => (critic: IcriticState) => {
    const c = [...critics];

    c[index] = critic;

  // ...
  // in render method:

for every single different critic (and reader): => (
    <div key={}>
        {props.shouldRenderCritics &&
            props.criticsChildren &&
            cloneElement(props.criticsChildren, { criticId: })}

where props.criticsChildren contains <FormsByAudience audienceId={id} books={books} />.

As a result, inside a single render, there are lots of separate bindings for the critics variable. You don't have a single critics for the whole application, or for a given audience; you have multiple critics arrays, one for each critic. Setting the state for one critic's critics array in FormsByAudience does not result in changes to other critics arrays that the other critics' React elements close over.

To fix it, given that the critics array is being created from props.books, the critics state should be put near the same level where the books are used, and definitely not inside a component in a nested mapper function. Then pass down the state and the state setters to the children.

The exact same thing applies to the readers state.

Here is a minimal live Stack Snippet illustrating this problem:

const people = ['bob', 'joe'];
const Person = ({name, i}) => {
  const [peopleData, setPeopleData] = React.useState( => 0));
  const onChange = e => {
    setPeopleData(, j) => j === i ? : num)
  return (
      <input type="number" value={peopleData[i]} onChange={onChange} />
const App = () => {
      (name, i) => <Person key={i} {...{ name, i }} />

ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src=""></script>
<script crossorigin src=""></script>
<div class='react'></div>

To make the passing of props down easier to type and read, you could consider consolidating the 4 variables (2 data and 2 setters) into a single object.

export default function App() {
  const [critics, setCritics] = useCritics(books);
  const [readers, setReaders] = useReaders(books);
  const dataAndSetters = { critics, setCritics, readers, setReaders };
  const renderByAudience = (id: number) => {
    return <FormsByAudience audienceId={id} {...{ books, dataAndSetters }} />;

Pass dataAndSetters down until you get to

export default function FormsByAudience(props: FormsByAudienceProps) {
  const { critics, setCritics, readers, setReaders } = props.dataAndSetters;

Live demo:

If I could offer a few other pieces of advice, to up your code quality significantly:

  • Change Recap so that FormsByAudience is imported and called in Recap instead of in the parent. It's really weird (and hard to easily understand at a glance) for renderByAudience to create a React element that sometimes won't ever get used.

  • Recap has the critics and readers switched around. This is probably unintentional. This:

      {!isEmpty(props.audiences.critics) && => (

    should probably be

      { => (

    (there's no need for an isEmpty check before mapping an array)

  • The whole

    const selectedReader =
      readers.find((r) => r.readerId === (props.readerId as number)) || {};
    const readerIdx = readers.indexOf(selectedReader as IreaderState);
    const selectedCritic =
      critics.find((r) => r.criticId === (props.criticId as number)) || {};
    const criticIdx = critics.indexOf(selectedCritic as IcriticState);

    is unnecessary. Just pass down the reader/critic index from the parent component instead, and use critics[criticIdx] to get to the critic in question.

  • In hook.ts, this:

    const byAudience = books
      .map((b) => b.audiences)
      .filter((bk) => [1].includes(bk.audienceId));

    simplifies to

    const byAudience = books
      .flatMap(b => b.audiences)
      .filter(bk => bk.audienceId === 1);

    And this:

    byAudience.forEach((el) => { => {
        return readersToSet.push({ feedback: "", rate: "", readerId: });
      return readersToSet;

    doesn't make sense because forEach ignores its return value, and .map should only be used when returning a value from the callback to construct a new array. Either use flatMap on byAudience, or push inside a for..of loop.

    const readersToSet = byAudience.flatMap(
      el =>
        r => ({ feedback: "", rate: "", readerId: })

Related Query

More Query from same tag