I have been messing around with a few conditional rendering methods but, I can't seem to find one that works.
<div className="tags">
{adv_event.types.map(type => (
<div className="tag" key={type.tid}>
<h5 className="body-color">Event Type:</h5>
<Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
</div>
))}
</div>
Right now <h5 className="body-color">Event Type:</h5> is repeated for every tag. Is there a way to show the title once without adding it before each tag?
Move it outside the loop?
<div className="tags">
{adv_event.types.length > 0 ? (<h5 className="body-color">Event Type:</h5>) : ''}
{adv_event.types.map(type => (
<div className="tag" key={type.tid}>
<Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
</div>
))}
</div>
Related
Before, when i don't import materialize
it's ok
not import materialize
After, when i imported materialize in index.js it broke my page like this
the page have a container grid 12 column but i don't know how it do that, i just import not do any thing to want to have grid 12 column
import materialize.
i hope every one can explain for me in this case :((
-- I have classname coinciding with Materialui, it is "container"--
return (
<div className="container">
{data.map(player => (
<div className="column" key={player.id}>
<div className="card">
<img src={player.img}></img>
<h3>{player.name}</h3>
<p className="title">{player.club}</p>
<Link to={`detail/${player.id}`}>
<p><button>Detail</button></p>
</Link>
</div>
</div>
))}
</div>
)
We can see that the container of Material UI is active
--After changing its name, it worked as I expected.--
return (
<div className="player__list">
{data.map(player => (
<div className="column" key={player.id}>
<div className="card">
<img src={player.img}></img>
<h3>{player.name}</h3>
<p className="title">{player.club}</p>
<Link to={`detail/${player.id}`}>
<p><button>Detail</button></p>
</Link>
</div>
</div>
))}
</div>
)
After I changed the name "container" it was active
in my console it displays this: "Warning: Each child in a list should have a unique "key" prop."
can you help me ? thank you
Code : https://paste.artemix.org/-/F-vscq
Every node that is returned from the map function needs to have a key prop:
{ users
? users.map((user,topbar, img) => (
<div className="topBarContainer" key={user}>
Your
return (
<Fragment>
{ user
? user.map((users,topbar, img) => ( <div className="topBarContainer">
<div key={topbar} className="topBarLeft">
<span className="logo">Groupomania</span>
</div>
<div className="topBarCenter">
<div className="searchBar">
<Search className="searchIcon" />
<input placeholder="Vous cherchez quelque chose ?" className="searchInput" />
</div>
</div>
<div className="topBarRight">
<div className="topBarLinks">
<span className="topBarLink">Page d'acceuil</span>
<span className="topBarLink">TimeLine ? </span>
</div>
<img key={img} src={users.nom} alt="" className="topBarImg" />
</div>
</div>))
: (<p>coucou</p>)
}
</Fragment>
)
code totally correct.I think your problem should be fetching data and url.Please check axios part and api part of your code.Thanks!
This is my first time using React, and I am confused about the syntax. In Sublime Text I keep getting an error for the open parenthesis after return in the following code saying there is no closure, however I clearly have it near the end of this string of text.
return (
<>
<section className="jumbotron jumbotron-fluid text-center">
<div className="container py-5">
<h1 className="display-4">Recipes for every occasion</h1>
<p className="lead text-muted">
We’ve pulled together our most popular recipes, our latest
additions, and our editor’s picks, so there’s sure to be something
tempting for you to try.
</p>
</div>
</section>
<div className="py-5">
<main className="container">
<div className="text-right mb-3">
<Link to="/recipe" className="btn custom-button">
Create New Recipe
</Link>
</div>
<div className="row">
{recipes.length > 0 ? allRecipes : noRecipe}
</div>
<Link to="/" className="btn btn-link">
Home
</Link>
</main>
</div>
</>
);
}
}
export default Recipes;
The code seems to mess up after the backslash in </> and everything after that is the same color as a string.
What am I missing here?
Your Sublime Text JSX highlighter is probably old enough not to support the <> syntax.
Either:
Update the highlighter (there may be a better one in Package Control)
Use the long-form <React.Fragment>...</React.Fragment> syntax for fragments.
I stored the image name in localstorage.
My local Storage data is:
Key:contact
data:[{"id":1,"name":"","query":"","image":"'./Koala.jpg'","price":""}]
My code is below
return (
<React.Fragment>
<h2>Products Cataloge.</h2>
<div className="container" id="con">
<div className="row">
{this.state.comment.map((item,index)=>(
<div className="col-md-4" >
<div className="card" id="card1" >
<img className="card-img-top" src={require(item.image)} alt="Card image"/>
<div className="card-body">
<h4 className="card-title">{item.name}</h4>
<Link to={`/description/${item.id}`} ><button className="btn btn-primary">View Discription</button></Link>
</div>
</div>
</div>
))}
</div>
</div>
</React.Fragment>
);
For file and url paths you want them to be formatted './path' or "./path"
By setting data.image to data { image: "'./Koala.jpg'" } you will be returning the whole string value './Koala.jpg' including the single quotes
const data = {imageGood:" ./Koala.jpg " , imageBad:"'./Koala.jpg'"}
console.log('imageBad' , data.imageBad) // "'./Koala.jpg'"
console.log('imageGood', data.imageGood) // "./Koala.jpg"
If you can change the way your data is being populated change:
data:[{"id":1,"name":"","query":"","image":"'./Koala.jpg'","price":""}]
To:
data:[{"id":1,"name":"","query":"","image":"./Koala.jpg","price":""}]
If not then you will need to remove them manually. One easy way:
const item = {image:" './Koala.jpg' "}
console.log( item.image.split("'").join('') )
I have the following jsx code, I am trying to put some code out of the mapping function, but getting errors with the jsx syntax, I want this block displayed only if there is some data..
{this.props.someData ?
<div className="container">
<h3>Heading</h3>
<div className="block1">
<button>one</button>
<buttontwo</button>
</div>
this.props.someData.map((response, index) => {
return (
<div className="Block2">
<div key={index}>
<span>{response.number}</span>
</div>
</div>
</div>
);
}) : ''}
Write it like this:
{this.props.someData ?
<div className="container">
<h3>Heading</h3>
<div className="block1">
<button>one</button>
<buttontwo</button>
</div>
{this.props.someData.map((response, index) => {
return (
<div className="Block2">
<div key={index}>
<span>{response.number}</span>
</div>
</div>
)})
}
</div>
: <div/>}
Mistake you are doing:
To render any js code inside html elements, {} is required, since you are rendering JSX if the condition is true and inside that using map so put map function inside {}, it will work.
You should be able to add a child { wrapping your map. You have a few other errors as well. You were cosing your tags and braces too early. Additionally, an "empty" JSX element should return null, not empty string. You also have broken syntax with no closing > here: <buttontwo</button>
Using a code editor that provides syntax highlighting, and using consistent spacing, and always using eslint to check for errors, will help prevent the need to come to StackOverflow and blocking your programming on syntax questions.
{this.props.someData ?
<div className="container">
<h3>Heading</h3>
<div className="block1">
<button>one</button>
<button>two</button>
</div>
{ this.props.someData.map((response, index) => {
return (
<div className="Block2">
<div key={index}>
<span>{response.number}</span>
</div>
</div>
);
}) }
</div> : null}
If I get your meaning correctly, I think this would do:
{this.props.someData &&
(<div className="container">
<h3>Heading</h3>
<div className="block1">
<button>one</button>
<buttontwo</button>
</div>
{this.props.someData.map((response, index) => {
return (
<div className="Block2">
<div key={index}>
<span>{response.number}</span>
</div>
</div>
);
})}
</div>)
}
I'd recommend you to have a look at the conditional rendering section of the documentation.