Returning a React Element within a Functional Component

Question

I am fairly new to React and trying to edit a former coworker's code (hence the non-traditional React style).

I need to return a series of buttons (here "Hello" and "Goodbye") when a single button ("Dropdown") is clicked. In order to make this more dynamic down the line, I'd like to return those buttons from a function (dropdownDetails) rather than [show,setShow] variables, etc.

When I run this code, the console shows that dropdownDetails is triggered, but "Hello" and "Goodbye" don't appear in the UI. What am I doing wrong?

Thanks in advance!

///// In base.js:
const e = React.createElement;

///// in page_body.js:
function pageBody(props) {

    const dropdownDetailsWrap = (props) => (e) => {
      console.log("Wrap triggered")
      dropdownDetails()
    }
    
    function dropdownDetails() {
        console.log("dropdownDetails useEffect triggered")
        return( 
            e("button",{type:"button"},"Hello"),
            e("button",{type:"button"},"Goodbye")
             );
    };
    
    const pageBody = () => (e) => {
    return(
        e("button", {type:"button",onClick:dropdownDetailsWrap(),className:'btn'},"Dropdown")
        )}
    }

ReactDOM.render(e(pageBody), document.querySelector('#page_body'));

Note: I know there are more elegant ways to make a dropdown, particularly using packages. Just trying to understand the basics with pure React for now.

Answer 1

Probably you can do like this provided you use the useState hook of react.

Wihtout using state, I doubt we can do this.

I am pasting the code below, check it out on codesandbox to explore more.

Here is the link Link

Code:

import React, { useState } from "react";
const e = React.createElement;

export default function App() {
  return (
    <div className="App">
      <PageBody />
    </div>
  );
}

function PageBody(props) {
  var buttonsToShow;
  const [showButtons, setshowButtons] = useState(false);
  const [buttons, setButtons] = useState([]);

  const dropdownDetailsWrap = (props) => {
    console.log("Wrap triggered");
    buttonsToShow = dropdownDetails();
    setButtons(buttonsToShow);
    setshowButtons(true);
  };

  function dropdownDetails() {
    console.log("dropdownDetails useEffect triggered");
    return [
      e("button", { type: "button", key: 1 }, "Hello"),
      e("button", { type: "button", key: 2 }, "Goodbye")
    ];
  }

  var dropbutton = () => {
    return e(
      "button",
      { type: "button", onClick: dropdownDetailsWrap, className: "btn" },
      "Dropdown"
    );
  };

  return (
    <div>
      {dropbutton()} <br /> {showButtons && buttons}
    </div>
  );
}

Now,I know this is not the best version but still you can clean this code and use the logic. Also by using state your code does not become static, moreover you get to customize more things,