React newbie here. I have a component which gets an array of objects in JSON format and saves it into the state.
I am now unsure how I can render the name/description of only the 3rd object in the components render function.
I want to be able to only render the 1,2,3,4,5th object etc as well.
Any ideas?
https://codesandbox.io/s/admiring-ishizaka-rfp3k - Demo
return (
<div className="App">
{name1} // Object 1 name
{description1} // Object 1 description
{name2} // Object 2 name
{description2} // Object 2 description
</div>
);
To give you the basic idea, you can display the name of your 3rd component on your render like this:
render() {
return (
<div className="App">
{this.state.profiles.map((item, index) => {
return(
index === 2 ? item.name : ""
)
})}
</div>
);
}
Please use Array map
render() {
const { profiles } = this.state;
return (
<div className="App">
{
profiles.map(profile => (
{profile.name}
{profile.description}
))
}
</div>
);
}
render() {
return (
<div className="App">
{this.state.profiles.map((data, i) => {
return(
i=== 2 ? (<p>{data.name}</p>) :(<p> </p>)
)
})}
</div>
);
}
Related
Function holding the ternary syntax and I can't able to render the content of the newElement function.
Used variables:
test1 = 1;
IstestString = true;
Render functions:
newElement = () => this.test1 === 1
? <h1>test is one</h1>
: <h1>test is not one </h1>;
render() {
return (
<div className='App'>
<p style={style}>{this.newElement}</p>
</div>
);
}
Someone can help me to find the problem here, please?
You need to return from your function in order to render jsx
Try something like below:-
newElement = () => {
return (
this.test1 === 1 ?
<h1> test is one</h1> : <h1>test is not one </h1>
)
}
render() {
return (
<div className='App'>
<p style={style}>{this.newElement()}</p> // add brackets here to call function
</div>
);
}
You just need to return a JSX element and avoid using render in a normal component function.
let NewElement = () => {
return (
<p style={{ display: "block" }}>
{true ? <h1>test is one</h1> : <h1>test is not one </h1>}
</p>
);
};
export default function App() {
return (
<div className="App">
<h1>A New Element</h1>
<NewElement />
</div>
);
}
Because you need a return value.
Also, be careful with your comparison. There's a difference between == and ===. The first one compares value but not type. The second one compares both value and type. Just look it up on google.
Note: You can keep your <p></p>, just for clarity's sake I excluded it (because technically it's not necessary but I don't know what you're trying to display)
newElement = () => {
let check = this.test1===1 ? <h1> test is one</h1> : <h1>test is not one</h1>
return check;
}
render() {
return (
<div className='App'>
{this.newElement()}
</div>
);
}
I have an array of string arrays like,
items : [a[],b[],c[],d[]].
I want to render the elements of this array as a carousel using React. The following code doesn't work. Any help would be appreciated.
public render(): React.ReactElement<IReactCarouselProps> {
return (
<div>
<Carousel>
{this.state.items.map((list,key) => {
return(
<div key = 'key'>
<div>{list.a}</div>
</div>
);
}
)}
</Carousel>
</div>
);
}
working example https://jsfiddle.net/shuts13/cfLxrn15/6/
render() {
return (
<div>
{this.state.items.map((subArray, index) => {
return (
<div key={index}>
{subArray.map((subitem, i) => {
return (
<ul>
<li>{subitem.value}</li>
</ul>
);
})}
</div>
);
})}
</div>
);
}
To render a array of arrays you can map the second array too. This way your code will loop the parent array and loop all the child arrays, rendering them the way you want.
Here is a example:
public render(): React.ReactElement {
const flatArray = parentArray.map(
(childArray) => {(childArray.map((childElement) => <div>Your code here</div>)})
);
return (
{flatArray}
);
}
or, even better, you can use array flat.function(), like this:
public render(): React.ReactElement {
const flatArray = parentArray.flat().map((childElement) => <div>Your code here</div>)
return (
{flatArray}
);
}
Read more about array.flat() method here: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
I have a function that I am using to check if there are results from a page load and if there are, then map the array and return a component and if there aren't then return a string stating there are no results. At the moment I have been able to write the function without any issue, but I can't seem to get return statement to load. Am I following the right path to returning the components or is there a better method?
The console logs return the correct info, but everything in the return() isn't appearing in the view.
export default class BlogKanbanLayout extends React.Component {
constructor(props) {
super(props);
this.resultsCheck = this.resultsCheck.bind(this);
}
resultsCheck(blogs, user) {
console.log("resultsCheck")
console.log(blogs)
console.log(blogs.length)
if(blogs.length === 0) {
<p>There are no results for your filter criteria.</p>
} else {
console.log("There are blog results")
console.log(blogs)
console.log(user)
blogs.map((blog, index) => {
console.log("blog map")
console.log(blog)
return (
<div className="row">
<p>This is a test></p>
<BlogKanbanCard {...blog} key={blog.blogIdHash} user={user} />
</div>
)
})
}
}
render() {
return (
<div className="col-md-12">
{this.resultsCheck(this.props.negativeBlogs, this.props.user)}
</div>
)
}
}
In your resultsCheck you forgot to return the result of your mapping.
Also, the key used in the map function needs to be given to parent element, which here is your div.
And using conditional rendering you can reduce your entire component to the following code for te exact same result :
export default class BlogKanbanLayout extends React.Component {
render() {
const { negativeBlogs, user } = this.props
return (
<div className="col-md-12">
{negativeBlogs.length ?
negativeBlogs.map(blog =>
<div className="row" key={blog.blogIdHash}>
<p>This is a test></p>
<BlogKanbanCard {...blog} key={blog.blogIdHash} user={user} />
</div>
)
:
<p>There are no results for your filter criteria.</p>
}
</div>
)
}
}
And since you are not using the state of your component you could even optimize it to a stateless one :
const BlogKanbanLayout = ({ negativeBlogs, user }) =>
<div className="col-md-12">
{negativeBlogs.length ?
negativeBlogs.map(blog =>
<div className="row" key={blog.blogIdHash}>
<p>This is a test></p>
<BlogKanbanCard {...blog} key={blog.blogIdHash} user={user} />
</div>
)
:
<p>There are no results for your filter criteria.</p>
}
</div>
You resultsCheck method need to return something, so you need to add the return statement before the two results
resultsCheck(blogs, user) {
console.log("resultsCheck")
console.log(blogs)
console.log(blogs.length)
if(blogs.length === 0) {
return <p>There are no results for your filter criteria.</p>
} else {
console.log("There are blog results")
console.log(blogs)
console.log(user)
return blogs.map((blog, index) => {
console.log("blog map")
console.log(blog)
return (
<div className="row">
<p>This is a test></p>
<BlogKanbanCard {...blog} key={blog.blogIdHash} user={user} />
</div>
)
})
}
}
i need to create extra div wrapper for second and third element in React
I use a map function and i dont know how to fix it.
Here is a sandbox https://codesandbox.io/s/ojz6lvqnp6
And here is a what i need to achive
Another screen:
You need to change your code in your render method to
if (index !== 0) {
return (
<div key={index} className="second_wrapper">
<h1 >{index}</h1>
</div>
);
} else ....
EDIT:
You would need to change your code to :
render() {
const { members } = this.state;
return (
<div>
<div className="first_wrapper">
<h1 key={0}>{members[0].name}</h1>
</div>
<div className="second_wrapper">
{members.map((m, i) => {
if (i > 0) return <h1 key={i}>{m.name}</h1>;
})}
</div>
</div>
);
}
The new sandbox
I'm trying to render an array of messages but would want it to render differently by class given a condition my code looks like this:
render() {
return (
<div>
{this.props.messages.map((m, index) => (
//if m.id === 1 render this:
<p className={someClass1}>Hello, {m.message}!</p>
//else render this:
<p className={someClass2}>Hi, {m.message}!</p>
))}
</div>);
}
you can easily add logic to your map. you just need the contents to not be an inline return of a react component.
render() {
return (
<div>
{this.props.messages.map((m, index) => {
if (m.id === 1){
return <p className={someClass1}>Hello, {m.message}!</p>
}
return <p className={someClass2}>Hi, {m.message}!</p>
})}
</div>
);
}
You can also do the same thing with a forEach outside of the return on your render like so
render() {
const elems = [];
this.props.messages.forEach( (m, index) => {
if (m.id === 1) {
elems.push(<p className={someClass1}>Hello, {m.message}!</p>);
} else {
elems.push(<p className={someClass2}>Hi, {m.message}!</p>);
}
return (
<div>
{elems}
</div>
);
}