Discussion on: Multilingual website with Gatsby and Contentful - Part 2

[Žane Suhadolnik]

I'm using gatsby-plugin-intl aswell. How do you go about mapping through an array that is translated?

Example:

{
  "contact" : "Kontakt",
  "biography" : "Biografija",
  "about": "Jože je luč sveta ugledal sredi še črno-belih šestdesetih let v Ljubljani. Že pri svojih zgodnjih šestnajstih letih je fotografiral za takratno jugoslovansko tiskovno agencijo Tanjug in revijo Mladina. Kot fotoreporter je v začetku devetdesetih delal za časopis Dnevnik in revijo Mladina. Leta 1993 pa je soustanovil fotoagencijo Bobo, hkrati pa sodeloval z agencijami Reuters, Associated Press in EPA. Na prehodu v 21. stoletje je nekaj let delal kot fotograf za Delo revije. Danes je zaposlen kot fotoreporter za časopis Delo.",
  "biography_link": "Biografija",
  "exhibitions_link": "Razstave",
  "exhibitions_title": "Razstave",
  "books_link": "Knjige",
  "exhibitionList": [
    "1984 »Portreti«, Galerija ŠKUC, Ljubljana",
    "1986 »Portreti«, Galerija ŠKUC, Ljubljana",
    "1986 »Portreti«, Bologna, Italija",
    "1986 »Portreti«, Galerija Fenix, Ljubljana",
    "1987 »Portreti«, Bologna, Italija",
    "1989 »Portreti«, Galerija FNAC, Pariz, Francija",
    "1989 »Portreti«, Gledališče, Celje",
    "1995 »Eritreja«, Galerija ŠKUC , Ljubljana",
    "1996 »Pregledna razstava portretov«, Cankarjev Dom, Ljubljana",
    "1998 »Portreti«, Gledališče Franceta Prešerna, Kranj",
    "2001 »Portreti«, A-Banka, Ljubljana",
    "2001 »Portreti«, Kamerni Teatar, Sarajevo, Bosna in Hercegovina",
    "2004 »Jutra v Rusiji«, Založba Beletrina",
    "2004 »Jutra v Rusiji«, Festival Medana",
    "2004 »NSK 1980-2000«, Galerija Fotografija, Ljubljana",
    "2004 »Jutra v Rusiji«, Galerija Moskva Petuški, Tolmin",
    "2004 »Občutek za veter«, Lendava",
    "2004 »Jutra v Rusiji«, Fotopub, Novo Mesto",
    "2005 »Pregledna razstava«, Galerija Herman Pečarič, Piran",
    "2005 »Občutek za veter«, Velika Polana",
    "2005 »Drežniški pustolovi«, Fotopub, Novo Mesto",
    "2005 »Pregledna razstava«, Galerija ŠKUC, LJjubljana",
    "2006 »Ostanki dneva« Galerija Photon, Ljubljana",
    "2006 »Sirarji«, Žalec",
    "2007 »Sirarji«, Slovenska Ambasada Bruselj, Belgija",
    "2009 »Auslenderji«, Gaelrija modernih umetnosti, Slovenj Gradec",
    "2009 »Auslenderji«, Delavski Dom, Trbovlje",
    "2010 »Portreti slovenskih pesnikov in pisateljev«, Mestna Hiša, Ljubljana",
    "2010 »NSK 1980-2000«, Galerija Korotan, Dunaj, Avstrija",
    "2012 »Album, NSK«, Galerija Jakopič, Ljubljana"
  ],
  "copied": "Kopirano!",
  "clickToCopy": "Kliknite za kopiranje email naslova",
  "contact_title": "Kontakt",
  "contact_name": "Ime in priimek",
  "contact_email": "Email",
  "contact_subject": "Zadeva",
  "contact_message": "Sporočilo",
  "contact_upload_file": "Naloži datoteko",
  "contact_send_msg": "Pošlji sporočilo"
}

Component where I want to map:

import React from 'react'
import styled from 'styled-components'
import { useIntl } from 'gatsby-plugin-intl'
import uuid from 'uuid'
import { Layout, AboutHeader, SideBar } from '../components'
import config from '../../config/about'

const BG = styled.div`
  background-color: ${props => props.theme.colors.bg};
`

const Exhibitions = styled.ul`
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
`

const About = () => {
  const intl = useIntl()
  const exhibitionList = intl.formatMessage({ id: 'exhibitionList' }) // Looping over this doesn't work
  console.log(exhibitionList)
  return (
    <Layout customSEO id="outer-container">
      <SideBar right pageWrapId="page-wrap" outerContainerId="outer-container" />
      <AboutHeader />
      <BG id="page-wrap">
        <Exhibitions>
          {config.exhibitionList.map(item => {
            return <li key={uuid.v4()}>{item}</li>
          })}
        </Exhibitions>
      </BG>
    </Layout>
  )
}

export default About

[Louis Bertin]

Hi!

I have created the same kind of data in my intl file :

{
    "title": "Gatsby English",
    "description": "Project description",
    "author": "@louisbertin",
    "hello": "Hi people!",
    "welcome": "Welcome to your new Gatsby site.",
    "title_page2": "Page two",
    "hello_page2": "Hi from the second page",
    "go_page2": "Go to page 2",
    "welcome_page2": "Welcome to page 2",
    "go_back": "Go back to the homepage",
    "footer_build": "Built with",
    "test": [
        "hello",
        "world"
    ],
    "notfound": {
        "header": "NOT FOUND",
        "description": "You just hit a route that doesn't exist... the sadness."
    }
}

If I try to console.log(intl.messages) in one of my components I can see that react-intl not return an array of string but it creates multiple keys based on the number of items in the array :

So, you can create an array based on the object keys :

  var test = Object.keys(intl.messages).reduce((acc, item) => {
    if (item.includes("test")) {
      return [...acc, intl.messages[item]]
    }
    return acc
  }, [])
  console.log(test)

It returns :

["hello", "world"]

Now you can loop through this array and display all your data 🙂

Or.. if you know the number of items in your list (not recommended but faster) :

{[0, 1].map(index => (
   <FormattedMessage id={`test.${index}`} />
))}

[Žane Suhadolnik]

Thank you for the answer! I ended up doing something similar: spectrum.chat/gatsby-js/general/us...