How can I take out the elements of the arrangement one by one? within div in Reactjs

Question

This is being made from React-Hooks I want to show the elements of the arrangement one by one.

I want to be expressed in the overall result. (As a result, is at the bottom.) Perhaps what I want is to 'reduce this lot of code'.

What should I use? useContext? useReducer? Or is there an easier way? I'm a beginner. Let me know. masters

const Container = () => {
      const compoFunc = () => {
        const friendsContainer = {
          title: ["HBD", "Friends", "Chennel"],
          content: [
            "your friend's BD",
            "Meet new friends",
            "My chennel",
          ],
          num: [5, 100, 23],
        };
        return (
          <>
            <FriendsMain>
             
                <div>{friendsContainer.title}</div>
             
                <FriendsFront>
                  <div>{friendsContainer.content}</div>
                </FriendsFront>

                <FriendsRear>{friendsContainer.num}</FriendsRear>

            </FriendsMain>
          </>
        );
      };
    
      return (
        <div>
          <FriendContainer>
            <div> // I want to put friendsContainer's arrangement one by one here... By turns
              {compoFunc()}<-- HBD, your friend's BD, 5
              {compoFunc()}<-- Friends, Meet new friends, 100
              {compoFunc()}<-- Chennel, My chennel, 23
            </div>
          </FriendContainer>
        </div>
      );
    };
    
    export default Container;

This is the overall result I want.

              <FriendsMain>
             
                <div>HBD</div> //title[0]
             
                <FriendsFront>
                  <div>your friend's BD</div> //content[0]
                </FriendsFront>

                <FriendsRear>5</FriendsRear> //num[0]

            </FriendsMain>
            <FriendsMain>
             
                <div>Friends</div> //title[1]
             
                <FriendsFront>
                  <div>Meet new friends</div> // content[1]
                </FriendsFront>

                <FriendsRear>100</FriendsRear> //num[1]

            </FriendsMain>
            <FriendsMain>
             
                <div>Channel</div> //title[2]
             
                <FriendsFront>
                  <div>My channel</div> //content[2]
                </FriendsFront>

                <FriendsRear>23</FriendsRear> //num[2]

            </FriendsMain>

Can you clarify what "show the elements of the arrangement one by one" means? Are you simply trying to map your state to UI? Or do you want to only display one entry at-a-time and cycle through them? It's a bit unclear what your expected desired result should be. — Drew Reese, Dec 07 '20 at 07:38
@DrewReese I corrected my question. If you don't understand yet, please ask me additional questions. — eeez kim, Dec 07 '20 at 08:05

score 1 · Accepted Answer · answered Dec 07 '20 at 08:39

Move friendsContainer to state or to some Container component level variable.
Map the data to JSX

Example Code:

const Container = () => {
  const [data] = useState({
    title: ["HBD", "Friends", "Chennel"],
    content: ["your friend's BD", "Meet new friends", "My chennel"],
    num: [5, 100, 23]
  });

  return (
    <div>
      <FriendContainer>
        <div>
          {Object.values(data.title).map((title, i) => (
            <FriendsMain>
              <div>{title}</div>
              <FriendsFront>
                <div>{data.content[i]}</div>
              </FriendsFront>

              <FriendsRear>{data.num[i]}</FriendsRear>
            </FriendsMain>
          ))}
        </div>
      </FriendContainer>
    </div>
  );
};

How can I take out the elements of the arrangement one by one? within div in Reactjs

1 Answers1