My strong recommendation is two-fold:

• Use the find method to find the correct topic.
• Don't use state to redundantly store information you already have from props. Storing information you already have can result in divergence. In this case, we can just find the appropriate topic in the render method:

import React, { Component } from "react";

import topics from "./topics.json";

class Tutorial extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const selectedTopic = topics.find(
      (topic, index) => page.url === this.props.match.params.url
    );

    return (
      <div className="Tutorial">
        <div className="ca-nav-spacer w3-hide-small"></div>
        {selectedTopic.name}
        {this.props.match.params.url}
      </div>
    );
  }
}

export default Tutorial;

I re-organized your code a bit to work as a functional component. As others were commenting, you need to use state to re-render your components on updates. I removed count since .map allows for indexing.( you can add it back as a variable inside TaskFunction if you deem necessary )

W3 School's example works because they are not updating state. They have a list that is pre-set with values and render those values.

Lastly, your map function need to 'return' the element. As in the w3 school's example, map returns the Car component. So what you had was a little mixed up.

Hope this helps.

function App() {
  const [tasks, setTasks] = React.useState([])
  const generateValue=()=>{
    let someValue = Math.random() *10
    let newValue = {value: someValue}
    setTasks([...tasks, newValue])
  }
  return (
    <div>
      <button onClick={()=>{generateValue()}}>Add New Item</button>
      <h1>List</h1>
      <ul>
        {tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
      </ul>
    </div>
  )
}

ReactDOM.createRoot(document.querySelector("#app")).render(<App />)

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

In a comment you ask to see the state example using the old style class components -

class App extends React.Component {
  state = {
    tasks: []
  }
  generateValue = () => {
    let someValue = Math.random() *10
    let newValue = {value: someValue}  
    this.setState({ tasks: [ ...this.state.tasks, newValue ] })
  }
  render() {
    return (
      <div>
        <button onClick={this.generateValue}>Add New Item</button>
        <h1>List</h1>
        <ul>
          {this.state.tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
        </ul>
      </div>
    )
  }
}

ReactDOM.createRoot(document.querySelector("#app")).render(<App />)

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

Without public class fields -

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      tasks: []
    }
  }
  generateValue() {
    let someValue = Math.random() *10
    let newValue = {value: someValue}  
    this.setState({ tasks: [ ...this.state.tasks, newValue ] })
  }
  render() {
    return (
      <div>
        <button onClick={this.generateValue.bind(this)}>Add New Item</button>
        <h1>List</h1>
        <ul>
          {this.state.tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
        </ul>
      </div>
    )
  }
}

ReactDOM.createRoot(document.querySelector("#app")).render(<App />)

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

You can use map to simplify it. The tricky bit will be the calling of Update with different number of parameters, but that too can be achieved using another map.

const columns = ['Title', 'Author', 'Rating'];

export const BookshelfListRow = (props) => {
  return (
    <tr className="table-row">
    {
      columns.map((column, i) => (
        <td>
          <input onChange={ e =>
                   props.Update(...[                                            // the parameters to Update consist of
                     ...columns.slice(0, i).map(column => props.book[column]),  // the column values from the start until the current column, map is used here to get the values for those columns
                     e.target.value                                             // and the input value
                   ])
                 }
                 placeholder={ props.book[column] } />
        </td>
      ))
    }
    </tr>
  )
}

Another approach:

The Update function is a mess. It can be a lot simpler if it just takes the column that was changed and the value as there is no need for it to send all those props back to the server if only one was changed, like so (this uses computed property names):

const Update = (column, value) =>                                         // takes the column that was changed and the value
  axios.put('http://localhost:4001/books/update', { [column]: value });   // update only that column

Then the rendering will be much simpler also, like so:

const columns = ['Title', 'Author', 'Rating'];

export const BookshelfListRow = (props) => {
  return (
    <tr className="table-row">
    {
      columns.map((column, i) => (
        <td>
          <input onChange={ e => props.Update(column, e.target.value) } placeholder={ props.book[column] } />
        </td>
      ))
    }
    </tr>
  )
}