How to make links in a loop?

Need to make links in the cycle React component. Tell me the correct syntax please.
<CardImg top width="100%" src={`/${item.picture}`} alt="{item.imgalt}" />
March 20th 20 at 11:27
2 answers
March 20th 20 at 11:29
Solution
{items.map(item => (
 <CardImg key={item.picture} top width="100%" src={item.picture} alt={item.imgalt} />
))}


Lists and keys
Anton doesn't help.
Here is the entire syntax.
import React from 'react';
import { Card CardBody, Button, CardTitle, CardGroup, CardImg } from 'reactstrap';
import { Link } from 'react-router-dom';
import "./Googs.scss";
import items from './Googsprops';

const Item = (item) => {
 return (
 <Card className="card-block">
 <CardImg top width="100%" src={item.picture} alt={item.imgalt} />
<CardBody>
<CardTitle>{item.heading}</CardTitle>
 <Button className="card-button">
 <Link to={item.anchor}>Watch</Link>
</Button>
</CardBody>
</Card>
)
}

class ItemList extends React.Component {
 render() {
 const itemElements = this.props.items.map(item =>
 <Item item = {item}/>
)
 return (
<>
{itemElements}
</>
)
}
}

class Googs extends React.Component {
 render() {
 return (
<CardGroup>
 <ItemList items = {items}/>
</CardGroup>
);
}
}

export default Googs;
- Trudie_Ferry95 commented on March 20th 20 at 11:32
@kiana88, and what exactly does not work? You items is an array? Any errors in the console?
Need more details. - ryley commented on March 20th 20 at 11:35
@Reymundo.Leuschke45, Anton, a problem was sorted by replacing const Item = (item) => { for function Item({ item }) {
Everything works. Now the problem with the conclusion of the external links in the cycle. Now I get the following links
localhost:3000/http://mysite.EN - Trudie_Ferry95 commented on March 20th 20 at 11:38
@kiana88,
1. There is no difference const or function. The mistake was what's right to access a property of a component it is necessary so:
const Item = (props) => {
 // props.item

or destructional arguments:
const Item = ({ item }) => {

2. Component Link is not used for external links and to links client router. - ryley commented on March 20th 20 at 11:41
@Reymundo.Leuschke45, About 1 already knew prior to your response. 2, translated into a tag. It worked.
One last question with links to images in a loop. Put images in folder static and want to get in the same cycle. The link appears correctly but the image does not appear. Like a simple matter, and there are no pictures. - Trudie_Ferry95 commented on March 20th 20 at 11:44
@kiana88, you will need to either do an explicit import of symbols in the code:
import image from './image.png';
either self-host the image files in the static directory of the server and use simple lines - ryley commented on March 20th 20 at 11:47
@Reymundo.Leuschke45, So I had to do this for single links. And then the cycle. It is necessary that he dragged them in turn. - Trudie_Ferry95 commented on March 20th 20 at 11:50
@kiana88when you connect image via import or require it intercepts file-loader, the file is copied to the dist directory, and the path in the Assembly changes the path of the relative path of the static directory. If you are using for the paths string no import or require, the copy of the file and the validity of the resource url from the static directory rests on your shoulders.
So I advise to learn how to use the developer dashboard. On the same tab, network you can always see error downloading files. - ryley commented on March 20th 20 at 11:53
March 20th 20 at 11:31
<CardImg top width="100%" src={require(`${item.picture}`)} alt="{item.imgalt}" />

Find more questions by tags React