wiziple / gatsby-plugin-intl

Gatsby plugin that turns your website into an internationalization-framework out of the box.
http://gatsby-starter-default-intl.netlify.com
325 stars 178 forks source link

Loading an array using useIntl hook? #88

Closed zasuh closed 4 years ago

zasuh commented 4 years ago

I have a list of items which is translated into two different languages. I need to map through this list in order to render it, but can't seem to find an example of how to do so?

en.json:

{
  "contact" : "Contact",
  "biography" : "Biography",
  "about": "Jože was born in the midst of the revolutionary 1960s in Ljubljana, Slovenia (Yugoslavia at the time). At the age of 16 he was already earning money as a photographer for the Yugoslav press agency Tanjug and magazine Mladina. In the early 1990s he was a photojournalist for a Slovenian newspaper Dnevnik and continued to take photos for Mladina. In 1993, he was one of the founders of a Slovene photo agency Bobo, whilst he was working with Reuters, Associated Press and EPA. From 1999 to 2005, he was a photograph for Delo revije, now he works for the Slovene leading daily Delo.",
  "biography_link": "Biography",
  "exhibitions_link": "Exhibitions",
  "books_link": "Books",
  "exhibitionList": [
    "1984 Portraits, ŠKUC Gallery, Ljubljana, Slovenia",
    "1986 Portraits, ŠKUC Gallery, Ljubljana, Slovenia",
    "1986 Portraits, Bologna, Italy",
    "1986 Portraits, Fenix Gallery, Ljubljana, Slovenia",
    "1987 Portraits, Bologna, Italy",
    "1989 Portraits, FNAC Gallery, Paris, France",
    "1989 Portraits, Theatre House, Celje, Slovenia",
    "1995 Eritrea, ŠKUC Gallery, Ljubljana, Slovenia",
    "1996 Retrospective Exhibition of Portraits, Cankarjev Dom, Ljubljana, Slovenia",
    "1998 Portraits, France Prešern Theatre House, Kranj, Slovenia",
    "2001 Portraits, A-Banka, Ljubljana, Slovenia",
    "2001 Portraits, Kamerni Theater, Sarajevo, Bosnia and Hercegovina",
    "2004 Mornings in Russia, Publisher Beletrina, Ljubljana, Slovenia",
    "2004 Mornings in Russia, Medana Festival, Slovenia",
    "2004 NSK 1980-2000, Gallery Fotografija, Ljubljana, Slovenia",
    "2004 Festival Moskva Petuški, Tolmin, Slovenia",
    "2004 Sense for the wind, Lendava, Slovenia",
    "2004 Mornings in Russia,Fotopub, Novo Mesto, Slovenia",
    "2005 Retrospective Exhibition, Herman Pečarič Gallery, Piran, Slovenia",
    "2005 Feel the Wind«, Velika Polana, Slovenia",
    "2005 Drežnica Adventurers, Fotopub, Novo Mesto, Slovenia",
    "2005 Retrospective Exhibition, ŠKUC Gallery, Ljubljana, Slovenia",
    "2006 Remains of the day, Photon Gallery, Ljubljana, Slovenia",
    "2006 Cheese Makers, Žalec, Slovenia",
    "2007 Cheese Makers, Slovenian Embassy,  Brussels, Belgium",
    "2009 Auslenders, Contemporary Art Museum, Slovenj Gradec, Slovenia",
    "2009 Auslenders, Delavski Dom, Trbovlje, Slovenia",
    "2010 Portraits of Slovenian Poets and Writers, Mestna Hiša, Ljubljana, Slovenia",
    "2010 NSK 1980-2000, Korotan Gallery, Viena, Austria",
    "2012 Album, NSK, Jakopič Gallery, Ljubljana, Slovenia"
  ]
}

exhibitions.js page:

const About = () => {
  const intl = useIntl()
  const exhibitionList = intl.formatMessage({ id: 'exhibitionList' })
  console.log(exhibitionList)
  return (
    <Layout customSEO id="outer-container">
      <SideBar right pageWrapId="page-wrap" outerContainerId="outer-container" />
      <AboutHeader />
      <BG id="page-wrap">
        <Title>Exhibitions</Title>
        <Exhibitions>
          {exhibitionList.map(item => {// gives error that exhibition list is not a function?
            return <li key={uuid.v4()}>{item}</li>
          })}
        </Exhibitions>
      </BG>
    </Layout>
  )
}
Roejkum commented 4 years ago

@zasuh did you find a solution for this? I am facing the same issue (only with a list of objects).