How do I build a sentence with in react using a loop?

Question

I want to print this out on the web.

[Mandatory] By creating an account, you agree to ArticleA, ArticleB, ArticleC, ... ArticleX.

Where Link is a component from material-ui.

const createTACLine = (article, isMandatory) => {
  let cline = '';

  if (isMandatory) {
    cline = cline + '[Mandatory] By creating an account, you agree to ';
  }
  Object.keys(article).forEach(function (key) {

    cline = cline +  <Link
        component="button"
        variant="body2"
        to="/"
    > +{article[key].name}+ </Link>;
    if (parseInt(key) !== article.length - 1) {
      cline = cline + ', ';
    }

  });

  cline = cline + ".";

  return cline;
};

where article here is

{
    "id": 12,
    "name": "ArticleA",
    "url": "http://.....",
},
{
    "id": 13,
    "name": "ArticleB",
    "url": "http://.....",
},
{
    "id": 13,
    "name": "ArticleC",
    "url": "http://.....",
},
{
    "id": 14,
    "name": "ArticleX",
    "url": "http://.....",
}

Instead, I get the following.

[Mandatory] By creating an account, you agree to [object Object], [object Object], [object Object], [object Object].

I see a lot of examples using push to push list items but I need to build a sentence here. Is there some other way to build a string using a loop and ?

Hi hinewinner, just created a solution for you below. See sandbox and below code :) — Chris Ngo, Jul 22 '19 at 09:50

score 2 · Accepted Answer · answered Jul 22 '19 at 13:51

2

Try this instead:

  createTACLine = (article, isMandatory) => {
    return (
      <div>
        {isMandatory ? "[Mandatory] By creating an account, you agree to " : ""}
        {article
          .map(art => {
            return (
              <Link component="button" variant="body2" to={art.url}>
                {art.name}
              </Link>
            );
          })
          .reduce((prev, curr) => [prev, ", ", curr])}
      </div>
    );
  };

answered Jul 22 '19 at 13:51

Michael

128
6

Thanks it did the trick. I have a quick question. Chrome complains that "Each child in a list should have a unique "key" prop." so I added 'key={art.id}' in Link to make the warning go away. Is this because map function returns array and it somehow expects unique key? – hinewwiner Jul 22 '19 at 14:21
In React, all elements should have a unique key. This question provides a lot of information about keys: https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js – Michael Jul 24 '19 at 11:42

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

It looks like you're passing in an array to the string, but what you really need is to just extract the article name.

Here's a working sandbox: https://codesandbox.io/s/friendly-feather-ihoh4

Working code:

import React from "react";
import ReactDOM from "react-dom";
import Link from "@material-ui/core/Link";

import "./styles.css";

const article = [
  {
    id: 12,
    name: "ArticleA",
    url: "http://....."
  },
  {
    id: 13,
    name: "ArticleB",
    url: "http://....."
  },
  {
    id: 13,
    name: "ArticleC",
    url: "http://....."
  },
  {
    id: 14,
    name: "ArticleX",
    url: "http://....."
  }
];

class App extends React.Component {
  createTACLine = (article, isMandatory) => {
    let cline = "";

    if (isMandatory) {
      cline = cline + "[Mandatory] By creating an account, you agree to ";
    }

    article.forEach((art, index) => {
      if(index === 0){
        cline = cline + art.name
      } else {
        cline = cline + ", " + art.name
      }

    });

    return (
      <Link component="button" variant="body2" to="/">
        {cline}
      </Link>
    );
  };

  render() {
    return <div>{this.createTACLine(article, true)}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Thanks for the quick reply. However, this makes the whole line "[Mandatory] By creating an account, you agree to ArticleA, ArticleB, ArticleC, ... ArticleX." as one link. I want each article to link to its url based on url in the json. — hinewwiner, Jul 22 '19 at 10:42

score 0 · Answer 3 · answered Jul 22 '19 at 09:25

0

Here article seems to be an array of objects. Try

article.forEach(obj => {
 // your Link with obj.name
})

answered Jul 22 '19 at 09:25

Aman Gupta

1,764
4
30
58

score 0 · Answer 4 · answered Aug 05 '22 at 08:08

I generate my links for "pagger" using loop, look at this:

render()
    {
       
        var page = 7;//this.props.pagger.page ;
        var pages = 20;//this.props.pagger.pages ;

        var clickablePageLeft = [];
        var clickablePageRight = [];

      
            for(var k=page-10; k<page; k++)
            {
                if(k < 1) continue;
                clickablePageLeft.push(k);
            }
   
            for(var k=page+1; k<pages; k++)
            {
                if(k > page + 10 ) continue;
                clickablePageRight.push(k);
            }
          
      
        
      

        return (
            <div className='pagger'>               
                  <div className='pleft'>
                      {
                        clickablePageLeft.map(item => {
                            return <Link to={ /page= + item }> {item} </Link>
                        } )
                      }
                       {page} 
                      {
                        clickablePageRight.map(item => {
                            return <Link to={ /page= + item }> {item} </Link>
                        } )
                      }
                  </div>
                  <div className='pright'>
                         <div className='records'>10</div>
                         <div className='records'>50</div>
                         <div className='records records_selected'>100</div>
                         <div className='records'>1000</div>
                     </div>
            </div>
        )
    }

How do I build a sentence with in react using a loop?

4 Answers4

Working code: