score:1

Accepted answer

changes:

1. we can't return more that one element so wrap the all the elements inside 1st map in a div.

2. use return inside 1st map.

3. wrapping a p tag (any html element) inside {} is not required.

write it like this:

<div>
    {!props.isloading && <div>
        {normalizeddata.map((outerobj,index) => {
            return (
                <div>
                    <p classname="space_name">
                        {outerobj.space_name}
                    </p>
                    {
                        outerobj.applicants.map((obj,i) => {
                            return (
                                <div>
                                    <div>
                                        {renderdetail(obj)}
                                    </div>
                                </div>
                            )
                    })}
                </div>
            )}
        )}
    </div>
    }
</div>

score:0

the problem is the way how you are using arrow functions. when you wrap it with {}, you need to return something. however when you wrap jsx with () it will return the content object directly, for example:

const fn1 = () => {
  return { num: 1 }
}

const fn2 = () => ({
  num: 2
})

fn1(); // { num: 1 }
fn2(); // { num: 2 }

therefore you can rewrite your code like this:

<div>
  {!props.isloading &&
    <div>
      {normalizeddata.map((outerobj,index) => (
        <div>
          <p classname="space_name">
            {outerobj.space_name}
          </p>
          {outerobj.applicants.map((obj,i) => (
            <div>
              <div>
                {renderdetail(obj)}
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  }
</div>

score:2

when you need to return multiple elements in a map you need to wrap all the elements in a single div in a return statement. so change the p tag to be in the return div.

<div>
    {!props.isloading && <div>

    {normalizeddata.map((outerobj,index) => {
        return(
            <div>
                 <p classname="space_name">
                     {outerobj.space_name}
                  </p>

                  {outerobj.applicants.map((obj,i) => {
                      return (
                           <div>
                               <div>
                                   {renderdetail(obj)}
                               </div>
                           </div>)
                   })}
             </div>
     })}
     </div>}
</div>

Related Query

More Query from same tag