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
Related
Expectation: if the flag is true, then empty div "container" around div "content"
const Demo = () => {
const [flagABC] = useFlagFeature(true)
return (
<div className="featureflagoff"> style= {} onMouseEnter = {} //if feature flag is off || if feature flag is ON then empty div
<div className="content">
// huge code
<div>
</div>
);
}
how can i avoid copying the ("huge code") twice.
Assign the huge code to a variable and reference it.
const hugeCode = <div>...</div>
return (
<div className="featureflagoff">
<div className="content">
{hugeCode}
<div>
</div>
);
Assuming flagABC is the flag, you can do something like this:
const Demo = () => {
const [flagABC] = useFlagFeature(true)
return (
<div className={flagABC ? "" : "featureflagoff"}>
<div className="content">
// huge code
<div>
</div>
);
}
I am trying to render the child component inside a nested loop. However it is not being render in the second loop(red tick). Although it is rendered normally in the first loop (blue tick). Kindly highlight why is it no rendered in the second loop.
https://i.stack.imgur.com/LFiKU.png
Codesandbox Link : https://codesandbox.io/s/competent-nova-u9rzuh?file=/src/parent.js
import React from "react";
import ProductFeaturesCards from "./ProductFeaturesCards.js";
import { Products } from "../ProductsData.js";
const ProductFeatures = ({ className = "", id }) => {
return (
<section id='product-features' className={`${className}`}>
<div className='container'>
<div className='row d-flex justify-content-center'>
<div className='col-lg-12 col-md-12 col-sm-12 col-12 py70'>
<p className='features-title'>Product Features</p>
</div>
</div>
<div className='row'>
{Products.forEach((item, i) => {
if (item.id === id) {
// return <ProductFeaturesCards data={item} key={i} />;
Object.values(item.Product_features[0]).map((feature, index) => {
console.log("ProductFeaturesCards:", feature);
return <ProductFeaturesCards data={feature} key={index} />;
});
}
})}
</div>
</div>
</section>
);
};
export default ProductFeatures;
Can you try this. Not sure if this will work
if (item.id === id) {
// return <ProductFeaturesCards data={item} key={i} />;
return Object.values(item.Product_features[0]).map((feature, index) => {
console.log("ProductFeaturesCards:", feature);
return <ProductFeaturesCards data={feature} key={index} />;
});
}
The first mistake you did was using forEach. forEach will mutate the data and will not return anything. So, Instead you need to use map which doesn't mutate and returns the result.
The 2nd mistake is the return statement not added inside the if condition for the map. So, it never gets returned and hence your first map will not receive the value.
After this you should be able to run it.
<div className="row">
{Products.map((item) => { // replaced forEach with map
if (item.id === id) {
return Object.values(item.Product_features[0]).map( // return added
(feature, index) => {
return <Card data={feature} key={index} />;
}
);
}
})}
</div>
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>
);
}
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>
);
}
I would like to show mapped posts from an API inside the OwlCarousel component (import OwlCarousel from 'react-owl-carousel') the code works just fine, but only outside the OwlCarousel component. You can test on this CodeSandbox https://codesandbox.io/s/friendly-rhodes-bv5ot, the code works when you remove the OwlCarousel tag.
renderPost = () => {
return this.state.posts
? this.state.posts.map(data => (
<div key={data.id} className="item">
<div className="heading">{data.subject}</div>
<div className="content">{data.message}</div>
</div>
))
: "Loading...";
};
render() {
return (
<div className="container">
<OwlCarousel className="owl-container owl-theme">
{this.renderPost()}
</OwlCarousel>
</div>
);
}
The code works only when i put the function outside the OwlCarousel component, i think it has something to do with scopes!
render() {
return (
<div className="container">
{this.renderPost()}
</div>
);
}
Try with following code
renderPost = () => {
return (
<div>
{this.state.posts
? this.state.posts.map(data => (
<div key={data.id} className="item">
<div className="heading">{data.subject}</div>
<div className="content">{data.message}</div>
</div>
))
: "Loading..."}
</div>
)
};
And In your render of the Component, you can do same as you have already done,
{this.renderPost()}