menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
Team

Using gatsby-plugin-intl with an array of items?

December 5, 2019 at 5:16am

Using gatsby-plugin-intl with an array of items?

December 5, 2019 at 5:16am
I've successfully translated my components with gatsby-plugin-intl except for when I'm maping through an array of items in my localized .json files. How do you map through a localized array? Below are my examples:
en.json exhibitionList je what I want to loop over:
{
"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",
"exhibitions_title": "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"
],
"copied": "Copied!",
"clickToCopy": "Click to copy Email to clipboard",
"contact_title": "Contact",
"contact_name": "Name",
"contact_email": "Email",
"contact_subject": "Subject",
"contact_message": "Message",
"contact_upload_file": "Upload File",
"contact_send_msg": "Send Message"
}
exhibition page:
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 Title = styled.h3`
max-width: 600px;
margin: 0 auto;
text-align: center;
padding: 40px 0 20px 0;
text-decoration: underline;
`
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

December 6, 2019 at 8:53am
Just to give an update if anyone ever finds this useful. Arrays don't work with react-intl, but what you can do is instead of doing:
"id": ["Item1", "Item2"]
you do:
"id": "[\"Item1\", \"Item2\"]"
and the use JSON.parse to get your array. In my case: const exhibitionList = JSON.parse(intl.formatMessage({ id: 'exhibitionList' })) and then just loop over exhibitionList.
Edited
  • reply
  • like