I'm developing a multilanguage site and in several sections I use a hardcoded json to store some clients details (name, logo, project description and website) and then I map the json file and print the details using a component nothing fancy.
The problem is that I'm trying to set multilanguage and I don't know why when I try to set translated values to the json is not working. This is how I'm trying it now:
This is my react component:
import { useTranslation } from "react-i18next";
const { t } = useTranslation();
const companyADescription = t("projects.companyA.name");
{
name: "Company A",
url: "company.com",
image: "/assets/projects/a.png",
technologies: [
{
icon: "/assets/tech/react.png",
link: "#",
alt: "",
},
{
icon: "/assets/tech/firebase.png",
link: "#",
alt: "",
},
],
description: t("project.companyA.name"),
},
{
name: "Company B",
url: "company.com",
image: "/assets/projects/b.png",
technologies: [
{
icon: "/assets/tech/react.png",
link: "#",
alt: "",
},
{
icon: "/assets/tech/firebase.png",
link: "#",
alt: "",
},
],
description: t("projects.companyB.name"),
},
And this is my json file with the translation:
"projects": {
"companyA": {
"name": "Company A Project",
"description": "This is the company project description A"
}
}
On other sections I use the t function from the useTranslation hook and works well I already spent a lot of time on this issue :(
The problem is here
description: t("project.companyA.name")
The function isnt being called
You can try this above declaration of JSON
const descriptionA = t("project.companyA.name")
const descriptionB = t("projects.companyB.name")
And then assign the values in JSON as
{
name: "Company A",
url: "company.com",
image: "/assets/projects/a.png",
technologies: [
{
icon: "/assets/tech/react.png",
link: "#",
alt: "",
},
{
icon: "/assets/tech/firebase.png",
link: "#",
alt: "",
},
],
description: descriptionA ,
},
{
name: "Company B",
url: "company.com",
image: "/assets/projects/b.png",
technologies: [
{
icon: "/assets/tech/react.png",
link: "#",
alt: "",
},
{
icon: "/assets/tech/firebase.png",
link: "#",
alt: "",
},
],
description: descriptionB ,
},
Related
I am building a blog website using Sanity and NextJS.
I've created this object in the sanity schema.
{
name: "content",
title: "Content",
type: "array",
of: [{
type: "block"
},
{
name: "myCode",
title: "Code",
type: "code"
}
]
}
I am fetching the data using import { createClient } from "next-sanity"; and using import PortableText from "react-portable-text";; to render the objects received from sanity.
{
_createdAt: '2022-09-18T13:16:41Z',
_id: '1f6b2ee7-4a2b-40e7-805e-b00208dfe5d0',
_rev: 'XOYlEtECWeMhp8Pp0lwIEq',
_type: 'blog',
_updatedAt: '2022-09-21T09:50:25Z',
content: [
{
_key: 'd9fba48f3f71',
_type: 'myCode',
code: '"""\nThis is the first part of code in python\n"""',
language: 'python'
},
{
_key: '6a037159196b',
_type: 'block',
children: [Array],
markDefs: [],
style: 'normal'
},
{
_key: 'ad404d6059fe',
_type: 'myCode',
code: 'def fun():\n print("PYFUN")',
language: 'python'
},
{
_key: 'f8e723dbff93',
_type: 'block',
children: [Array],
markDefs: [],
style: 'h1'
}
]
}
Now, I want to render the blog.content section using PortableText.
Every object is rendering, except the object inside the blog.content with _type="myCode".
Is there a specific way to render the _type="myCode"? any help is really appriciated.
I start working with react and i need to set mock json data to list in footer.
How i can set list dynamically to each module. I have 3 modules Company, Catalog, Contacts, and JSON:
const FOOTER_DATA = {
menu: {
title: "Company",
items: [
{
title: "Link 1",
link: "#",
},
{
title: "Link 2",
link: "#",
}
],
},
catalog: {
title: "Catalog",
items: [
{
title: "Link Link 1",
link: "#",
},
{
title: "LinkLink 2",
link: "#",
},
{
title: "LinkLink 3",
link: "#",
},
{
title: "LinkLink 4",
link: "#",
},
{
title: "LinkLink 5",
link: "#",
},
{
title: "LinkLink 6",
link: "#",
}
],
},
contact: {
email: "some-mail#gmail.com",
tel: "777 777 777",
work_time: {
weekdays: "09:00 - 18:00",
weekends: "10:00 - 16:00",
},
},
};
How i can set this for each jsx file, to special tags:
<Company />
<Categories />
<Contacts />
I am really beginner in react an i stuck in such issues.
You should pass the data as a prop to each element and render the data inside each component.
<Company data={FOOTER_DATA?.menu}/>
<Categories data={FOOTER_DATA?.catalog}/>
<Contacts data={FOOTER_DATA?.contact}/>
For example you may have a JSX component for Company like below,
import React from "react";
const Company = ({ data }) => {
return (
<React.Fragment>
<h2>{data.title}</h2>
{data.items.map((item, index) => (
<a key={index} href={item.link}>
{item.title}
</a>
))}
</React.Fragment>
);
};
export default Company;
I have the following data coming from an API:
const feed = {
id: "feedId",
content: "...",
comments: [
{
id: "commentId",
content: "...",
// reply comments
comments: [{
id: "commentId",
content: "..."
}]
}
],
}
I want to normalize the data for use in Redux as presented here. But my data has reply comments nested. I dont know where to place comment reply. Should I use normalize data and normalizr lib ?. Thank a lot If you answer and explain for me. Sorry about my bad english, but I really want know.
// where place comments reply ???
{
feeds: {
byId: {
"feed1": {
id: "feed1",
content: "...",
comments: ["comment1", "comment2"],
},
"feed2": {
id: "feed2",
content: "...",
comments: ["comment3", "comment4"],
},
},
allIds: ["feed1", "feed2"],
},
comments: {
byId: {
"comment1": {
id: "comment1",
content: "...",
},
"comment2": {
id: "comment2",
content: "...",
},
"comment3": {
id: "comment3",
content: "...",
},
"comment4": {
id: "comment4",
content: "...",
},
},
allIds: ["comment1", "comment2", "comment3", "comment4"],
},
};
This is my current init feedReducer for handle feed and comments in reducer.
const initialState = {
feed_id_1: {
id: "feed_id_1",
content: "...",
comments: [
{
id: "comment_id_1",
content: "...",
comments: [
{ id: "comment_reply_id_1", content: "..." },
{ id: "comment_reply_id_2", content: "..." },
],
},
{},
],
},
// ...
};
Can someone explain what I am doing wrong here....
<Something
content={[
{
heading: "Add Company",
icon: "plus",
options: {[
{
image: "srcimage",
text: "New Company",
link: "test"
}, { //Errors here
image: "srcimage",
text: "Existing Company",
link: "test"
}
]}
}, {
heading: "Import Company",
icon: "download",
options: {[
{
image: "/src/image",
text: "Class",
link: "/test"
},
{
image: "/src/image",
text: "BGL",
link: "/test"
},
{
image: "/src/image",
text: "SuperMate",
link: "/test"
}
]}
}]
} />
I get the error... Unexpected token, expected "]" where it says error here. Eventually I would like to create some blocks of content based on whats passed in like this....
Thanks
{[]} isn't valid syntax for an object.
content={[
{
heading: "Add Company",
icon: "plus",
options: [ // remove the curly boy that was here
{
image: "srcimage",
text: "New Company",
link: "test"
}, {
image: "srcimage",
text: "Existing Company",
link: "test"
}
] // and here
}, {
heading: "Import Company",
icon: "download",
options: [ // and here
{
image: "/src/image",
text: "Class",
link: "/test"
},
{
image: "/src/image",
text: "BGL",
link: "/test"
},
{
image: "/src/image",
text: "SuperMate",
link: "/test"
}
] // and here
}]}
For the options properties you need to remove the curly braces, just pass the array
options: [
{
image: "srcimage",
text: "New Company",
link: "test"
},
{
image: "srcimage",
text: "Existing Company",
link: "test"
}
]
I am new to AngularJs, and I'm creating the nested view template like this:
http://plnkr.co/edit/u18KQc?p=preview
But the code I have is of different type. For routing, it uses this:
awfApp.config(function ($stateProvider, $urlRouterProvider) {
var states = [
{ name: 'home', isDefault: true }, //TODO: Moure a awf
{ name: 'module1', module: { title: "Module 01", img: "modul1.png" } },
{ name: 'module2', module: { title: "Module 02", img: "modul2.png" } },
{ name: 'mainlist4', module: { title: "Main List4", img: "modul2.png" } },
{ name: 'mainlist2', module: { title: "Main List2", img: "modul2.png" } },
{ name: 'mainlist', module: { title: "Main List", img: "modul2.png" } }
];
if (appConfig.doLogin)
states.push({ name: 'articles', module: { title: "Articles", img: "articles.png" } });
});
Please tell me, how can create nested views in AngularJs using the code above.
Thanks