Introduction

I understand that you need to build some UI elements dynamically in your component’s render function in React. Yes! the only way is to loop through the items, you can either use a for loop or a map function to do so. But the real question is, are we allowed to do that in react? Unfortunately, not in a direct way, you may face some difficulty especially if you come from an Angular background. You were probably getting an error as ” unused expression, expected an assignment or function call”, and now you are here in this page for an easy solution. It isn’t that hard to achieve, I will explain how. I hope you will like it.

Background

I have an array of addresses and I need to show this in a print template, so I thought of creating a separate component which iterates through the item property. And each array element has its own property and I wanted to generate labels for each item. Here I am going to explain how I did it.

Let’s start coding

The first thing is, I have an interface for the address list properties as below.

import { IAddressData } from "../../../interfaces/IAddressData";
export interface IAddressListProps {
    items: IAddressData[];
}

Now I have created a component called PrintAddressList.tsx and written some code.

import * as React from "react";
import { IAddressListProps } from '../../detailPage/components/interfaces/IAddressListProps';

export class PrintAddressList extends React.Component<IAddressListProps, {}>{
  constructor(props: IAddressListProps) {
    super(props);
  }

  public render(): React.ReactElement<IAddressListProps> {
    return (
      <div>
      </div>
    );
  }
}

And I need to have my custom labels for each address inside the div element in the render function. To do so, I had created a private function called createAddressCard which will loop through my props and return the HTML I need.

private createAddressCard = () => {
    let parent = [];
    this.props.items.map((address) => {
      parent.push(<div style={{ padding: '10px', border: '1px solid #ccc', margin: '5px' }}>
        <label>{config.colNames.addressList.clmnAddressType}: </label>
        <label>{address.Adressart}</label><br />
        <label>{config.colNames.addressList.clmnCompanyName}: </label>
        <label>{address.Firma}</label><br />
        <label>{config.colNames.addressList.clmnPlaceName}: </label>
        <label>{address.Ort}</label><br />
        <label>{config.colNames.addressList.clmnZipCode}: </label>
        <label>{address.PLZ}</label><br />
        <label>{config.colNames.addressList.clmnTelephone}: </label>
        <label>{address.Telefon}</label><br />
      </div>);
    });
    return parent;
  }

Now I can easily call this function inside the render function.

public render(): React.ReactElement<IAddressListProps> {
    return (
      <div>
        {this.createAddressCard()}
      </div>
    );
  }

Below is the complete code for the component.

https://gist.github.com/SibeeshVenu/d2e11ed225a0568ded27c6f8fec0956c

Conclusion

In this post, we have learned how we can iterate our components properties inside a render function in the React component, for creating custom elements dynamically.

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? If yes, please like/share/clap for me. Thanks in advance.

Kindest Regards
Sibeesh Venu

Introduction

Welcome to my blog. I assume that you are working in Office UI Fabric React components and you wanted to create a horizontal menu component in your react solution.  Unfortunately, the normal Nav component in the Office UI Fabric doesn’t give you this option.  And somehow you reached here by searching for a solution to implement the horizontal menu. You are in the right place then. Let’s skip the talking and jump into the code.  I hope you will like this article. Let’s start coding.

Source Code

The source code can be found here.

Background

As I mentioned in the introduction, there is no option to make a horizontal menu if you are using UI Fabric Nav component. And I also ended up in spending some time playing with the Nav component to make it horizontal, but it wasn’t working as expected. And I found a different way to achieve the same, hereby I am sharing it as I couldn’t find such a solution on the internet.  You can always see my answer here on StackOverflow.

Creating Horizontal Nav component

I believe that you have already created your solution and you are just trying to create a new Menu web part in the existing solution. If you haven’t created a solution, you can create one using the below command.

yo @microsoft/sharepoint

MenuWebPart.ts

Once you have created a new web part, you can see that there is a file called MenuWebPart.ts. This is the file we are going to edit first. You can see the content of that file below.

As you can see I am calling the Menu component here with the property items, this is where you need to mention the contents of your menu.

Menu.tsx

Now let’s start editing the code in Menu.tsx file.

As you can see that I am using CommandBar here which accepts the items property which we have set before.

IMenuProps.ts

You would also need to add the items property in the IMenuProps.ts file.

Output

If you have configured the CommandBar component in an above-mentioned way, you would have seen a horizontal menu by now. Please be keep in mind that there are some limitations using in CommandBar. I would use this until Microsoft introduces a new property in the existing Nav component to make it horizontal.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu