IndianTechnoEra: Friend List using map() and arrow function and Individual in ReactJS | IndianTechnoEra

Creating a friendlist react component and exporting named export means exporting individually one by one to the variable 

Friend list in Reactjs with individual friends and using map() and arrow function

Creating friend list with two different methods

i. Individually defining all friends name one by one for each list

ii. Create a friend list array of all friend then using map and arrow function iterating each friend 

App2.js

// Example 1: Creating a friend list in Reactjs and input friend individual one-by-one

import React from 'react'

export const title1 = React.createElement('h1',{},'Named Export & Friend List (one-by-one)');

export const friendList1 = React.createElement(

  'div',

  { id: 'friend-list1' },

  React.createElement('h1', {}, 'Friend List 1'),

  React.createElement(

    'ul',

    { className: 'friends' },

    React.createElement('li', null, 'MyFriend 1.1'),

    React.createElement('li', null, 'MyFriend 1.2'),

    React.createElement('li', null, 'MyFriend 1.3')

  )

)

Output:

Creating a friend list in Reactjs and input friend individual one-by-one | IndianTechnoEra

// Example 2: Creating a friend list in Reactjs and friends fetch using map() and arrow function

export const title2 = React.createElement('h1',{},'Named Export & Friend List (with map)');

const friends = ['MyFriend 2.1','MyFriend 2.2','MyFriend 2.3'];

export const friendList2 = React.createElement(

    'div',{id:'friend-list2'},

    React.createElement('h1',{},"Friend List 2"),

        React.createElement('ul',{className:'friends'},

        friends.map((friends,i)=>React.createElement('li',{key:i},friends))

        )

);

index.js

import React from 'react'

import ReactDOM from 'react-dom/client'

import { title1 } from './App2'

import { friendList1 } from './App2'

import { title2 } from './App2'

import { friendList2 } from './App2'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(

  <>

    {title1}

    {friendList1}

    {title2}

    {friendList2}

  </>

)

Output:

// Example 2: Creating a friend list in Reactjs and friends fetch using map() and arrow function | Indiantechnoera

Example 3: A component with export default of variable based created element

App3.js

import React from 'react'

import ReactDOM from 'react-dom/client'

import App3 from './App3'

const friends = ['MyFriend 2.1','MyFriend 2.2','MyFriend 2.3'];

const friendList2 = React.createElement(

    'div',{id:'friend-list2'},

    React.createElement('h1',{},"Friend List 2"),

        React.createElement('ul',{className:'friends'},

        friends.map((friends,i)=>React.createElement('li',{key:i},friends))

        )

);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(friends);

export default App3;

index.js

import React from 'react'

import ReactDOM from 'react-dom/client'

import App3 from './App3'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(

  <>

    <App3 />

  </>

)

Note:

 In example 3 there is a problem of rendering. ca not be used for rendering as it again and again.

simply if we are using a constant to store the element creation then return named export