Who can show how to make from an array a list of elements inside which there are links to another component using REACT and REACT-ROUTER?

Question

React

Who can show how to make a list of elements from an array inside which there are links to another component using REACT and REACT-ROUTER. When you click on the link, the component below the link should appear. In the Courses component, it is not possible to dynamically create elements with links to other components
An example that does not work:

import React, { Component } from 'react';
import {BrowserRouter,Route,Link} from 'react-router-dom';
import Courses from './containers/Courses/Courses';
import Users from './containers/Users/Users';



class App extends Component {
  render () {
    return (
      <div className="App">
        <ol style={{textAlign: 'left'}}>
          <li>Add Routes to load "Users" and "Courses" on different pages (by entering a URL, without Links)</li>
          <li>Add a simple navigation with two links => One leading to "Users", one leading to "Courses"</li>
          <li>Make the courses in "Courses" clickable by adding a link and load the "Course" component in the place of "Courses" (without passing any data for now)</li>
          <li>Pass the course ID to the "Course" page and output it there</li>
          <li>Pass the course title to the "Course" page - pass it as a param or score bonus points by passing it as query params (you need to manually parse them though!)</li>
          <li>Load the "Course" component as a nested component of "Courses"</li>
          <li>Add a 404 error page and render it for any unknown routes</li>
          <li>Redirect requests to /all-courses to /courses (=> Your "Courses" page)</li>
        </ol>

        <h1>LINKS:</h1>


<BrowserRouter>
<div>
<div>
<ol style={{textAlign: 'center'}}>
<li><Link to="/user">Link to Users</Link></li>
<li><Link to="/courses">Link to Courses</Link></li>

</ol>
</div>
<div>
<Route path="/user" exact component={Users}/>
<Route path="/courses" exact component={Courses}/>

</div>
</div>

</BrowserRouter>


      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import {Route,Router} from 'react-router-dom';
import './Courses.css';
import Course from '../Course/Course'

class Courses extends Component {
    state = {
        courses: [
            { id: 1, title: 'Angular - The Complete Guide' },
            { id: 2, title: 'Vue - The Complete Guide' },
            { id: 3, title: 'PWA - The Complete Guide' }
        ]
    }

    render () {
        return (
            <div>
                <h1>Amazing Udemy Courses</h1>
                <section className="Courses">
                    {
                        this.state.courses.map( course => {
                            return (
                            <div>
                                <article className="Course" key={course.id}>{course.title}</article>

                                <ol style={{textAlign: 'center'}}>
                                <li><Link to={match.url}>Link to Course</Link></li>

                                </ol>

                                </div>
 
                            
                            );
                        } )
                    }
                    
<Route path={match.url} exact component={Course} />
                </section>
            </div>
        );
    }
}

export default Courses;

import React, { Component } from 'react';

class Course extends Component {
    render () {
        return (
            <div>
                <h1>_COURSE_TITLE_</h1>
                <p>You selected the Course with ID:</p>
            </div>
        );
    }
}

export default Course;

Answer 1

1. (App.js) Remove exact for courses 2. (Courses.js) Change the Link component
3. Read the documentation
https://reacttraining.com/react-router/web/guides/...

Answer 2

easier to watch the video