I am using <Link> and trying to pass in my thumb_id (if I console log it is just a string value) to my editvideo page as a parameter. How do I accomplish this?
Code Snippet
const { thumbnail, _id } = this.props;
return thumbnail.map(thumb => {
console.log(thumb._id);
return (
<div key={thumb._id} className="row__inner">
<Link to="/editvideo/:thumb._id">
<div className="tile">
<div className="tile__media">
<img
className="tile__img"
id="thumbnail"
src={thumb.thumbnail}
alt=""
/>
</div>
</div>
</Link>
</div>
Params using temp literal
Console log of thumb_id
You can use a template literal to insert the value of the variable in the string.
<Link to={`/editvideo/${thumb._id}`}>
Related
I need to replace a word and insert a link instead.
An example of how I want to do:
const text = "Edit src/App.js and save to reload."
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
{text.replace("Edit", <a
className="App-link"
href="https://reactjs.org"
target="_new"
rel="noopener noreferrer"
></a>)}
</p>
</header>
</div>
);
The JS function string.replace() expects two string parameters, but instead of the second string you supply a JSX <a> element.
Note that JSX is definitely not text, it may just look like it if you are not used to it. All JSX tags are translated into calls to React.createElement(), the result of which is a React object and not a string.
To solve it, you need to convert the string into parts, modify what needs modifying (while making sure that the React key requirement for items in a collection is fulfilled), then render the result, as in the following demo:
class Home extends React.Component {
render() {
const logo = null;
const text = "Edit src/App.js and save to reload."
// Create array:
const parts = text.split(" ");
// Modify array to contain JSX elements: one link, the rest Fragments, because every item
// in a collection needs a key to prevent React warnings.
// Also manually inserted back the spaces that went missing due to the split operation.
for (let i = 0; i < parts.length; i++) {
if (parts[i] === "Edit")
parts[i] = <a key={i} className="App-link" href="https://reactjs.org" target="_new" rel="noopener noreferrer">Edit</a>;
else
parts[i] = <React.Fragment key={i}>{" " + parts[i]}</React.Fragment>;
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
{parts}
</p>
</header>
</div>
);
}
}
ReactDOM.render(<Home />, document.getElementById('react'));
<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="react"></div>
setForecast(res2.data.list.map(item => [
<div className="each_data_point">
<li className="date_time" key={item.dt_txt}>{`Date & Time: ${item.dt_txt}`}</li>,
<img className="icon" key={item.weather[0].icon}>{`https://openweathermap.org/img/w/${item.weather[0].icon}.png`}</img>,
<li className="main_temp" key={item.main.temp}>{`Temp: ${item.main.temp}`}</li>
</div>
]
))
......
return (
<div>
<div className="five_day_forecast">
<div className="temp_body">
// Display here with Date/Time & Main Temp.
<p>{forecast}</p>
</div>
</div>
Is it possible to render an image from array.map() within React. When I run this, the DOM clears completely to white screen.
Using src in the img tag to render image
<img className="icon" key={item.weather[0].icon} src={`https://openweathermap.org/img/w/${item.weather[0].icon}.png`} />
And put the key in div instead in the children.
Not sure why you are doing it, but setting JSX in your state seems strange.
Try something like this, assuming res2.data.list has the list of values.
<div className="five_day_forecast">
<div className="temp_body">
// Display here with Date/Time & Main Temp.
<p>
{res2.data.list && res2.data.list.length >0 && res2.data.list.map(item => [
<div className="each_data_point">
<li className="date_time" key={item.dt_txt}>{`Date & Time: ${
item.dt_txt
}`}</li>
,
<img
className="icon"
key={item.weather[0].icon}
>{`https://openweathermap.org/img/w/${
item.weather[0].icon
}.png`}</img>
,
<li className="main_temp" key={item.main.temp}>{`Temp: ${
item.main.temp
}`}</li>
</div>
])}
</p>
</div>
</div>
Putting markup in state is a weird anti-pattern. State is really there to just store data not markup. You can use a function to create the JSX from mapping over the data.
You should be adding the source of the image to the src attribute of the img element.
Keys should be added to parent elements.
const imgSrc = `https://openweathermap.org/img/w/${item.weather[0].icon}.png`;
<img src={imgSrc} />
// `fetch` your data, and add it to state
setForecast(res2.data.list);
// `map` over the data and create the markup
function getMarkup() {
const imgSrc = `https://openweathermap.org/img/w/${item.weather[0].icon}.png`;
return forecast.map(item => {
<div className="each_data_point" key={item.dt_txt}>
<li className="date_time">{`Date & Time: ${item.dt_txt}`}</li>,
<img src={imgSrc} className="icon" />,
<li className="main_temp">{`Temp: ${item.main.temp}`}</li>
</div>
});
}
return (
<div>
<div className="five_day_forecast">
<div className="temp_body">
// Call the function to return the markup
// build from state
{getMarkup()}
</div>
</div>
);
There is something wrong in my source code but I'm not able to figure out what - please help
And my Code
const lastFutured = featured.pop();
export default function Home() {
return (
<section className="container home">
<div className="row">
<h1>Featured Posts</h1>
<section className="featured-posts-container">
<PostMasonry posts={featured} columns={2} tagsOnTop={true} />
<MasonryPost posts={lastFutured} tagsOnTop={true} />
</section>
<h1>Trending Posts</h1>
<PostMasonry posts={trending} columns={3} />
</div>
</section>
);
}
It is because you're not passing post prop to the component. Looking at the way, the MasonryPost function is defined, it's looking for a post prop and not a posts prop. Kindly change the following code:
<MasonryPost posts={lastFutured} tagsOnTop={true} />
To the following:
<MasonryPost post={lastFutured} tagsOnTop={true} />
// ^^^^
Use the post prop and not the posts prop, which might be the right one.
I've been playing around with Svelte 3. I'm trying to create a basic Link component that's used like this:
<Link to="http://google.com">Google</Link>
My component renders a normal HTML <a> tag with a favicon in front of the link text:
<script>
export let to
const imageURL = getFaviconFor(to)
</script>
<a href={to}>
<img src={imageURL} alt={`${title} Icon`} />
<slot />
</a>
The title variable I'm showing in the alt attribute for my <img> tag needs to be the text value of the unnamed slot. This is a really basic example, but is there any way to get the value of a slot like this?
In the mean time I found another (even better and not so hacky) way:
<script>
export let to
let slotObj;
const imageURL = getFaviconFor(to)
</script>
<a href={to}>
<img src={imageURL} alt={slotObj? slotObj.textContent + ' Icon' : 'Icon'} />
<span bind:this={slotObj}><slot/></span>
</a>
This hack will work.
Add a hidden span or div to bind the slot text:
<span contenteditable="true" bind:textContent={text} class="hide">
<slot/>
</span>
And update your code like this:
<script>
export let to
let text;
const imageURL = getFaviconFor(to)
</script>
<a href={to}>
<img src={imageURL} alt={text + ' Icon'} />
{text}
</a>
I want to skip the first in the .map function what I do now is this:
block.gallery.map((item, i) => (
<div className="gallery-item" key={i}>
{ block.gallery.length > 4 && i !== 0 ?
<div className="inner">
<img src={block.gallery[i].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[i].images.thumbnail_md} 1x, ${block.gallery[i].images.thumbnail_lg} 2x`} className="img-fluid" title="" />
<div className="img-overlay">
<span className="img-overlay-body">{ block.gallery.length - 4 }+ <span className="hidden-xs">Foto's</span></span>
</div>
</div>
:
<img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" />
}
So slice it to skip the first
block.gallery.slice(1).map(...)
You also need to reference the item passed into map, not using the index with the orginal array.
block.gallery[i].images.thumbnail_sm
should be
item.images.thumbnail_sm
You can also remove the first element, and retrieve it at any point, using Array.prototype.shift(); however, this modifies the original array.
const head = block.gallery.shift(); // removes and stores first element in "head"
console.log(block.gallery) // array with first element removed