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 on 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.
Conclusion
In this post, we 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 is needed? Could you find this post useful? If yes, please like/share/clap for me. Thanks in advance.