0

I've read about 10 other posts about this but they're all outputting really simple objects, strings and reading from JSONs. I am opening a modal, taking user input from an and setting the state with onChange(). On submit, the modal closes and there should be a component (imported from the component that generates them) pushed into an array. I can see that the element indeed is pushed into the array, but it isn't conditionally rendered using buttonsArray.map() OR by setting that map.() function to a variable and using {someVar} in the render area.

This is the code as it stands now (just sharing the relevant bits):

const buttonsArray: JSX.Element[] = [];

let mappedArray = buttonsArray.map((button, i) => {
  console.log("TEST!");
  return <li key={button + "-" + i}>{button}</li>;
});

const submit = () => {
  buttonsArray.push(<SuperpowerBtn icons={icons[1]} iconText={userInput} />);
  handleCloseModal();
};

and in the render I have:

<ul style={{ margin: 0, padding: 0 }}>{mappedArray}</ul>

and before this I had tried putting the .map() function within {...} in the render instead. Is it in the type declaration of buttonsArray? Because when I console.log() the array I get a strange object print out in some kind of weird JSON format describing the HTML element of type 'i' which is the FontAwesome icon being rendered as part of the component. I've tried rendering it every which way (with and without UL/LI) I could think of off the top of my head, also to no avail...Where am I going wrong?

PhilosophOtter
  • 183
  • 1
  • 2
  • 12
  • 1
    Please include a [mre]. Re-renders are caused by changes to state or props, are you updating either of these? `buttonsArray` seems like it should actually be part of state. – Brian Thompson Nov 22 '21 at 21:38
  • *strange object print out in some kind of weird JSON format* - this is a React element. It's what JSX translates to – Brian Thompson Nov 22 '21 at 21:39
  • I'm not updating the state or props, so perhaps I do need to store it in the state and not outside of the FC declaration... I will try this because there are too many parts to post a "MR example" – PhilosophOtter Nov 23 '21 at 12:24
  • How would I declare this in the state exactly? I am new with TypeScript and I have no idea where to even begin to look for this type of info/resources: To write this >> buttonsArray: JSX.Element[] = []; As >> const [buttonsArray, setButtonsArray] = useState(JSX.Element[]); – PhilosophOtter Nov 23 '21 at 12:46
  • 1
    See [this answer](https://stackoverflow.com/questions/53650468/set-types-on-usestate-react-hook-with-typescript) for typing the `useState` hook – Brian Thompson Nov 23 '21 at 14:07

0 Answers0