Search code examples
javascriptreactjsjsxrendering

How to render JSX by calling a regular function instead of a React component?


I tried adding 'return' before the JSX, but it stops the iteration. How can I write this correctly?

function App(){

  function foo(obj){
    for(let key in obj) {
      <div>...</div>
    }
  }

  return {
    <>
      {foo({...})}
    </>
  }
}

Solution

  • You need to return the JSX; it can't just be lying around in the function. Something like this should do the trick:

    function App(){
    
      function recursion(object){
        const ret = [];
    
        for(let key in object){
          if(typeof object[key] === 'object'){
            ret.push (
              <>
                <div>{key}</div>
                {recursion(object[key])}
              </>
            );
          } else {
            ret.push(<div>{key}</div>);
          }
        }
    
        return ret;
      }
    
      return (
        <>
          {recursion(someObject)}
        </>
      );
    }