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?