CODEWITHSUNDEEP
reactjs
hinewwiner
hinewwiner

Reputation: 707

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

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 ?

Upvotes: 2

Views: 1364

Answers (4)

Blazej Kita
Blazej Kita

Reputation: 133

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>
        )
    }

Upvotes: 0

Michael
Michael

Reputation: 128

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>
    );
  };

Upvotes: 2

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

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);

Upvotes: 1

Aman Gupta
Aman Gupta

Reputation: 1874

Here article seems to be an array of objects. Try 

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

Upvotes: 0

Related Questions