Trouble with displaying inputs

[upper rock]

Beginner here, working on a toy project. I have a simple page with a form. Users can enter data into the various fields.

I can see the inputs with console.log('formData end state: ', formData), but when I try to print the formData using

const CharacterDisplay: React.FC<CharacterDisplayProps> = ({ formData }) => {
  return (
    <div>
      <h3>
        Character Details:
      </h3>

      {Object.keys(formData).length > 0 ? 
          (<pre>{JSON.stringify(formData, null, 2)}</pre>) 
        : (<p>No character data available.</p>)}
    </div>
  );
};

I'm getting the "no character data available" result

I have a few misc bugs I'm working on that might possibly be related, but those I can solve, but this issue I'm really not sure where to begin on resolving. Any idea what I might be missing? Can send more code. Just not sure where the problem might be yet.

[blazing garnet]

@upper rock Probably the issue is in the component that calls this one - you're probably getting the data from something that isn't react state and so the component doesn't rerender when it changes.

[upper rock]

By component, do you mean here? This is the only place this is being called

function App() {
  const {formData} = useCharacterForm();

  return ( 
  <div className="w-full min-h-screen bg-[#080808] md:p-4 flex justify-center">
    <div className="h-max text-zinc-100 rounded-2xl  m-2 md:mx-20">
      <MenuBuilder />
      
      <div className='mx-4 my-6'>
        <CharacterDisplay formData={formData} />  
      </div> 
    
    </div>
  </div>
  )
}

formData is coming from here, if this helps

const useCharacterForm = () => {
  const [formData, setFormData] = useState<CharacterData>({});

  const handleInputChange = (name: string, value: string | number | undefined, isRadioGroup = false) => {
    console.log('formData beginning state: ', formData); 
      setFormData((prevData) => {
        let updatedData = {...prevData};
    
        if (isRadioGroup) {
          Object.keys(updatedData).forEach((key) => {
            if (key !== name) {
              delete updatedData[key];
            }
          });
        }

        updatedData[name] = Array.isArray(value) ? [...value] : value;

        console.log('updatedData deleted: ', updatedData); 
  
        updatedData[name] = value;
  
        console.log('updatedData end state: ', updatedData);
        console.log('formData end state: ', formData);
        console.log('------end of handleInputChange()------')
        return updatedData;
      });
    };

  return {
    formData,
    handleInputChange,
  };
};

[blazing garnet]

Hmm, looks fine at a glance

[upper rock]

Any ideas for other ways to check for things like with the console.logs I have?

I'm trying this in app.tsx

        {formData == void ? "formData empty" : console.log(formData)};

but it's giving me a Type 'string | void' is not assignable to type 'ReactNode'. Type 'void' is not assignable to type 'ReactNode'. error

[blazing garnet]

I wouldn't try to log inside the JSX.