There is a syntax error {} when I added {this.state.items && this.state.items.length? under <div className =" container ">. When I remove this extreme condition {this.state.items && this.state.items.length? : Components : <Preloader />everything works.A lot of nesting and I don't know exactly where the problem is. I think it is an extreme condition. Instead of the main component on the whole page I want to render the preloader on the whole page
class Items extends Component {
render () {
return (
<div className="container">
{this.state.items && this.state.items.length ?
<div className="items">
<div className="item">
<span>
<i></i>
</span>
<h4></h4>
<div className="select">
<button></button>
</div>
</div>
<div className="section">
<input/>
<span>
<i></i>
</span>
</div>
<div>
'AAAAAAA'
</div>
<div className="scroll">
{this.state.items.length === 0 && this.state.status === 1 ?
<div className="array">
<p>AAAAAA</p>
</div>
:
this.state.items && this.state.items.length ?
this.state.items.map((todo, index) =>
<Item
key={item.id}
index={index}
/>
)
:
<div className="preloader">
</div>
}
</div>
</div>
<div className="another">
<Component1
/>
<Component2
/>
</div>
:
<Preloader />
</div>
)
}
}
You were missing an } before the last div to close the first ternary and you were missing a wrapping tag for the first ternaries first expression (I used a React.Fragment). Code snippet bellow should be syntactically correct. I do recommend you refactor your code though.
class Items extends Component {
render() {
return (
<div className="container">
{this.state.items && this.state.items.length ? (
<React.Fragment>
<div className="items">
<div className="item">
<span>
<i></i>
</span>
<h4></h4>
<div className="select">
<button></button>
</div>
</div>
<div className="section">
<input />
<span>
<i></i>
</span>
</div>
<div>'AAAAAAA'</div>
<div className="scroll">
{this.state.items.length === 0 && this.state.status === 1 ? (
<div className="array">
<p>AAAAAA</p>
</div>
) : this.state.items && this.state.items.length ? (
this.state.items.map((todo, index) => (
<Item key={item.id} index={index} />
))
) : (
<div className="preloader"></div>
)}
</div>
</div>
<div className="another">
<Component1 />
<Component2 />
</div>
</React.Fragment>
) : (
<Preloader />
)}
</div>
);
}
}
Related
I want to take the section of code highlighted between the ** and then place it in the mark up where I have listed PLACE HERE. is this possible to do ? and if so what is the best way about doing this. I thought there could potentially be some way of declaring the function as a variable and then calling it on load within the markup ?
render() {
return (
<div className="content-slider-wrapper">
<div className="content-slider-title">
<span>PRODUCTS OF THE WEEK</span>
</div>
<div className={`${this.sliderData.length === 5 ? 'mt-xl-5' : ''} content-slider-container`}>
<div className="test-right" id="slider-move">
<Carousel
ref={ref => (this.carousel = ref)}
breakPoints={this.breakPoints}
disableArrowsOnEnd={true}
**renderPagination={({ pages, activePage, onClick }) => {
let arr;
arr = this.getAmountOfPages(pages, activePage);
return (
<>
<div className="ggg">
<div className={`${this.sliderData.length === 5 ? 'd-xl-none' : ''} arrow-container`}>
{arr[0] == true &&
<img onClick={() => this.setDirection("previous")} className="arrow-left" src={ArrowRight} /> }
{arr[1] == true &&
<img onClick={() => this.setDirection("next")} src={ArrowRight} /> }
</div>
</div>
<div className={`${this.sliderData.length === 5 ? 'd-xl-none' : ''} black-slider-container`}>
{pages.map(page => {
const isActivePage = activePage === page
return (
<div className={isActivePage ? 'black-slider' : 'blank-slider'}
key={page}
onClick={() => onClick(page)}
active={isActivePage}
/>
)
})}
</div>
</>
)
}}**
>
{this.sliderData.map((item, index) => (
<div key={index} className="carousel-item-container">
<div className="carousel-image-container">
<img src={top} />
</div>
<div className="carousel-text-container">
<ul>
<li className="carousel-text-container-title">{item.title}</li>
<li className="carousel-text-container-text">{item.typeOfProduct}</li>
<li className="carousel-text-container-text line-through">RRP {item.rrp}</li>
<li className="carousel-text-container-text line-through">Our Price: {item.ourPrice}</li>
<li className="carousel-text-container-text">Sale Price: {item.salePrice}</li>
</ul>
</div>
</div>
))}
</Carousel>
</div>
///PLACE IT HERE
</div>
</div>
)
}
}
Using a short circuit evaluation in a functional component (with hooks):
const Filters = () => {
const [options, setOptions] = useState([]);
return (
<div className="row">
{options.length > 0 && (
<div className="col-md-3">
<CustomComponent />
</div>
)}
</div>
)
}
Is there a way to render multiple elements right after an inline if condition?
{options.length > 0 && (
<div className="col-md-3">
<CustomComponent />
</div>
<div className="col-md-3">
<SecondComponent />
</div>
)}
Code above doesn't work, react throws an error. options array is filled after a promise resolved from useEffect(). That's why i've added this check, to display elements only when a promise resolved.
UPDATED CODE for #wentjun:
return (
{options.length > 0 && (
<div className="row">
<div className="col-md-3">
<CustomComponent />
</div>
</div>
)}
)
This throws a syntax error.
I think the error is due to returning two react elements. Try wrapping then in fragment
{options.length > 0 && (
<>
<div className="col-md-3">
<CustomComponent />
</div>
<div className="col-md-3">
<SecondComponent />
</div>
</>
)}
You should wrap the elements in React Fragments. The reason being, React elements are rendered via a single root node element. Wrapping it in Fragments will allow you to group the elements without adding additional nodes.
return (
<div className="row">
{options.length > 0 && (
<>
<div className="col-md-3">
<CustomComponent />
</div>
<div className="col-md-3">
<SecondComponent />
</div>
</>
)}
</div>
)
My component is being rendered in a single column equal to the photo I attached, but it is wrong, it was to be a 5x4 array.
edi1: In an old version of the code I did not have this problem, however I received some props, and since I have to constantly change the contents of the Component, I thought it was good to use state.
render() {
return (
<div className="App">
<Navbar onChange={this.onChange.bind(this)} />
<div className="container mt-10">
<div className="row">
{<RecipeItem list={this.state.searchString} />}
</div>
</div>
</div>
);
}
}
File RecipeItem.js
const RecipeList = ({ searchString }) => {
return(
<div>
<img className="card-img-top img-fluid" src={searchString.thumbnail} alt={searchString.title} />
<div className="card-body">
<h5 className="card-title">{searchString.title}</h5>
<p className="card-text">
<strong>Ingredients: </strong>{searchString.ingredients}
</p>
</div>
</div>
)
}
const RecipeItem = (props) => {
return (
<div className="col-sm-3 mt-4">
<div className="card">
{props.list && props.list.map((searchString, index) =>
<RecipeList searchString={searchString} key={index} />
)}
</div>
</div>
)
}
You're applying col-sm-3 before iterating on each element, you should apply the class on each iteration like this :
const RecipeItem = (props) => {
return (
props.list && props.list.map((searchString, index) =>
<div className="card col-sm-3 mt-4">
<RecipeList searchString={searchString} key={index} />
</div>
)
)
}
I'm mapping all of my files
_renderItems = files =>
files
? files.map((item, i) => {
return <ProjectItemUser {...item} key={i} index={i} />;
})
: null;
and then I'm trying to display it ProjectItemUser
class ProjectItemUser extends Component {
render() {
return (
<div>
<div className="book_item">
<div className="book_header">
<h2>{this.props.name}</h2>
</div>
<div className="book_this">
<div className="book_author">{this.props.subject}</div>
<div className="book_bubble">
<strong>Study: </strong> {this.props.study}
</div>
<div className="book_bubble">
<strong>Grade: </strong> {this.props.grade}
</div>
<FontAwesomeIcon icon="trash" id="trash" />
</div>
</div>
</div>
);
}
}
This basically displays all the files, and each file is its own separate row. I would like to assign value to div element on each iteration, so I can control which file has been clicked.
I can access my id with: this.props._id
Should this be done using refs and if so, how ?
You should pass onClick function as parameter
_renderItems = files =>
files
? files.map((item, i) => {
return <ProjectItemUser {...item} key={i} index={i} onClick={() => { console.warn(item) } />;
})
: null;
class ProjectItemUser extends Component {
render() {
return (
<div>
<div className="book_item">
<div className="book_header">
<h2>{this.props.name}</h2>
</div>
<div className="book_this">
<div className="book_author">{this.props.subject}</div>
<div className="book_bubble">
<strong>Study: </strong> {this.props.study}
</div>
<div className="book_bubble">
<strong>Grade: </strong> {this.props.grade}
</div>
<FontAwesomeIcon icon="trash" id="trash" />
<Button onClick={this.props.onClick} label="Click on me" />
</div>
</div>
</div>
);
}
}
How do I structure my return statement in a class component when my condition is using && operator as in:
if (x === null && y === null)
...then show this html:
<div className="col-12">
<SomeComponent />
</div>
else show this html:
<div className="col-6">
<SomeOtherComponent />
</div>
<div className="col-6">
<SomeOtherComponent />
</div>
I need this to be inside the return statement because I am wrapping the entire condition in a <main><div className="row></div></main> wrapper as in:
<main>
<div className="row">
// show the above mentioned html conditionally
</div>
</main>
You should use the short hand if statement <condition> ? <if true> : <if false>. Your return statement should look like this.
return (
<main>
{x === null && y === null ? (
<div className="row">
<div className="col-12">
<SomeComponent />
</div>
</div>
) : (
<div className="row">
<div className="col-6">
<SomeOtherComponent />
</div>
<div className="col-6">
<SomeOtherComponent />
</div>
</div>
)}
</main>
);
codesandbox with working example
You can use ternary operator:
(x === null && y === null) ? (render if true) : (render this if false)
Also, null is falsy value so you can write (!x && !y).
If you want to write with ifs, call method like this.renderComponent() and resolve everything there and just return value or whole component.
here is how you do it use ternary operator: {condition ? (if condition is true ) : (if condition is false)}
<main>
<div className="row">
{x === null && y === null ? (
<div className="col-12">
<SomeComponent />
</div>): (<div className="col-6">
<SomeOtherComponent />
</div>
<div className="col-6">
<SomeOtherComponent />
</div>)}
</div>
</main>