React - map array to child component
I'm coding a site with multiple pages. A page ComponentA
, have a child component that return sections with titles and paragraphs.
The array in ComponentA
pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1
to paragraph1
, title2
to paragraph2
and so on?
ComponentA:
import Child from "../components/child";
const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</Layout>
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
Child component:
const Child = ({ text, title }) => {
return (
<div>
{text.map(text => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};
javascript arrays reactjs
New contributor
add a comment |
I'm coding a site with multiple pages. A page ComponentA
, have a child component that return sections with titles and paragraphs.
The array in ComponentA
pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1
to paragraph1
, title2
to paragraph2
and so on?
ComponentA:
import Child from "../components/child";
const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</Layout>
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
Child component:
const Child = ({ text, title }) => {
return (
<div>
{text.map(text => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};
javascript arrays reactjs
New contributor
add a comment |
I'm coding a site with multiple pages. A page ComponentA
, have a child component that return sections with titles and paragraphs.
The array in ComponentA
pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1
to paragraph1
, title2
to paragraph2
and so on?
ComponentA:
import Child from "../components/child";
const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</Layout>
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
Child component:
const Child = ({ text, title }) => {
return (
<div>
{text.map(text => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};
javascript arrays reactjs
New contributor
I'm coding a site with multiple pages. A page ComponentA
, have a child component that return sections with titles and paragraphs.
The array in ComponentA
pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1
to paragraph1
, title2
to paragraph2
and so on?
ComponentA:
import Child from "../components/child";
const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</Layout>
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
Child component:
const Child = ({ text, title }) => {
return (
<div>
{text.map(text => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};
javascript arrays reactjs
javascript arrays reactjs
New contributor
New contributor
edited yesterday
kukkuz
28.8k62868
28.8k62868
New contributor
asked yesterday
noxstanoxsta
412
412
New contributor
New contributor
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Your info
object is not an iterable list - so I would convert them into a list {title, text}
like so:
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
Now I would shift the map()
function to ComponentA
instead of Child
as that makes the child component more meaningful.
See demo below:
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
{ data.map(item => {
return (
<Child key={item.title} title={item.title} text={item.text} />
);
})
}
</div>
)
}
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
ReactDOM.render(
<ComponentA/>,
document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
add a comment |
You can iterate over text and usnig index access the title
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</div>
)
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const Child = ({ text, title }) => {
return (
<div>
{text.map((text1, index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text1}</p>
</div>
);
})}
</div>
);
};
ReactDOM.render(<ComponentA />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
add a comment |
You can change your children component like this, since text
is an array so you need to access it values by index.
const Child = ({ text, title }) => {
return (
<div>
{text.map((text,index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};
You can even change you parent component to something like this
import Child from "../components/child";
const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
{info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
</Layout>
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
And then your child should be
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
noxsta is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55321253%2freact-map-array-to-child-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your info
object is not an iterable list - so I would convert them into a list {title, text}
like so:
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
Now I would shift the map()
function to ComponentA
instead of Child
as that makes the child component more meaningful.
See demo below:
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
{ data.map(item => {
return (
<Child key={item.title} title={item.title} text={item.text} />
);
})
}
</div>
)
}
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
ReactDOM.render(
<ComponentA/>,
document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
add a comment |
Your info
object is not an iterable list - so I would convert them into a list {title, text}
like so:
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
Now I would shift the map()
function to ComponentA
instead of Child
as that makes the child component more meaningful.
See demo below:
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
{ data.map(item => {
return (
<Child key={item.title} title={item.title} text={item.text} />
);
})
}
</div>
)
}
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
ReactDOM.render(
<ComponentA/>,
document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
add a comment |
Your info
object is not an iterable list - so I would convert them into a list {title, text}
like so:
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
Now I would shift the map()
function to ComponentA
instead of Child
as that makes the child component more meaningful.
See demo below:
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
{ data.map(item => {
return (
<Child key={item.title} title={item.title} text={item.text} />
);
})
}
</div>
)
}
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
ReactDOM.render(
<ComponentA/>,
document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
Your info
object is not an iterable list - so I would convert them into a list {title, text}
like so:
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
Now I would shift the map()
function to ComponentA
instead of Child
as that makes the child component more meaningful.
See demo below:
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
{ data.map(item => {
return (
<Child key={item.title} title={item.title} text={item.text} />
);
})
}
</div>
)
}
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
ReactDOM.render(
<ComponentA/>,
document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
{ data.map(item => {
return (
<Child key={item.title} title={item.title} text={item.text} />
);
})
}
</div>
)
}
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
ReactDOM.render(
<ComponentA/>,
document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const data = info.title.map((e,i) => {
return {title : e, text: info.text[i]}
})
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
{ data.map(item => {
return (
<Child key={item.title} title={item.title} text={item.text} />
);
})
}
</div>
)
}
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
ReactDOM.render(
<ComponentA/>,
document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
answered yesterday
kukkuzkukkuz
28.8k62868
28.8k62868
add a comment |
add a comment |
You can iterate over text and usnig index access the title
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</div>
)
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const Child = ({ text, title }) => {
return (
<div>
{text.map((text1, index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text1}</p>
</div>
);
})}
</div>
);
};
ReactDOM.render(<ComponentA />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
add a comment |
You can iterate over text and usnig index access the title
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</div>
)
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const Child = ({ text, title }) => {
return (
<div>
{text.map((text1, index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text1}</p>
</div>
);
})}
</div>
);
};
ReactDOM.render(<ComponentA />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
add a comment |
You can iterate over text and usnig index access the title
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</div>
)
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const Child = ({ text, title }) => {
return (
<div>
{text.map((text1, index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text1}</p>
</div>
);
})}
</div>
);
};
ReactDOM.render(<ComponentA />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
You can iterate over text and usnig index access the title
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</div>
)
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const Child = ({ text, title }) => {
return (
<div>
{text.map((text1, index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text1}</p>
</div>
);
})}
</div>
);
};
ReactDOM.render(<ComponentA />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</div>
)
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const Child = ({ text, title }) => {
return (
<div>
{text.map((text1, index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text1}</p>
</div>
);
})}
</div>
);
};
ReactDOM.render(<ComponentA />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
const ComponentA = () => {
return (
<div>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</div>
)
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
const Child = ({ text, title }) => {
return (
<div>
{text.map((text1, index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text1}</p>
</div>
);
})}
</div>
);
};
ReactDOM.render(<ComponentA />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
answered yesterday
Shubham KhatriShubham Khatri
93.2k15117158
93.2k15117158
add a comment |
add a comment |
You can change your children component like this, since text
is an array so you need to access it values by index.
const Child = ({ text, title }) => {
return (
<div>
{text.map((text,index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};
You can even change you parent component to something like this
import Child from "../components/child";
const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
{info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
</Layout>
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
And then your child should be
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
add a comment |
You can change your children component like this, since text
is an array so you need to access it values by index.
const Child = ({ text, title }) => {
return (
<div>
{text.map((text,index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};
You can even change you parent component to something like this
import Child from "../components/child";
const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
{info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
</Layout>
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
And then your child should be
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
add a comment |
You can change your children component like this, since text
is an array so you need to access it values by index.
const Child = ({ text, title }) => {
return (
<div>
{text.map((text,index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};
You can even change you parent component to something like this
import Child from "../components/child";
const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
{info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
</Layout>
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
And then your child should be
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
You can change your children component like this, since text
is an array so you need to access it values by index.
const Child = ({ text, title }) => {
return (
<div>
{text.map((text,index) => {
return (
<div>
<h3>{title[index]}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};
You can even change you parent component to something like this
import Child from "../components/child";
const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
{info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
</Layout>
}
const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};
And then your child should be
const Child = ({ text, title }) => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
};
edited yesterday
answered yesterday
Code ManiacCode Maniac
10.6k2733
10.6k2733
add a comment |
add a comment |
noxsta is a new contributor. Be nice, and check out our Code of Conduct.
noxsta is a new contributor. Be nice, and check out our Code of Conduct.
noxsta is a new contributor. Be nice, and check out our Code of Conduct.
noxsta is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55321253%2freact-map-array-to-child-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown