Function return will not render Links in React

Question

I want to map an array of titles as links that display in React. The titles come from a DynamoDB table that I turn into an array of React links.

I was able to successfully map the titles as links. I am able to see the return in the console.log. I am just unable to see the links render as I expect them too. I want to see these titles as links on the page. Even if I replace the return of my DisplayTitles function with Hello World in paragraph tags, I see nothing render. I even tried to wrap them like a list with no luck.

What did I miss? This seems like it should be straight forward, but here I am. I looked at other return issues here, but had no luck in finding a solution for my challenge. Thanks for your help.

Here is my index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This is my App.js file:

import { React } from 'react'; 
import './App.css';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import {Home} from './components/Home';
import {About} from './components/About';
import {DisplayTitles} from './components/AwsFunctions';

function App() {
  return (
    <BrowserRouter>
      <h1>Hello World</h1>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/about'>About</Link></li>
        <DisplayTitles tableName="recipes"/>
      </ul>
      <Routes>
        <Route path='/' exact element={<Home/>} />
        <Route path='/about' element={<About/>} />
      </Routes>
    </BrowserRouter>
  )
}

export default App;

And this is the problematic AwsFunctions.js file:

import * as AWS from 'aws-sdk';
import { Link } from 'react-router-dom';

AWS.config.update({
    region: 'some where',
    endpoint: 'out there',
    accessKeyId: 'key',
    secretAccessKey: 'secret'
  });

const docClient = new AWS.DynamoDB.DocumentClient()

export function DisplayTitles(props) {

    var params = {
        ProjectionExpression: "title",
        TableName: props.tableName
    }

    docClient.scan(params, function (err, data) {
        if (data) {

            const links = data['Items']
            const listLinks = links.map(link => (<li><Link to="/">{link.title}</Link></li>));
            
            return listLinks

        } else {
            console.log(err)
        }
    })
};

Answer 1

Check whether this helps

I have not done any error handling, but ideally you should account for loading and error states as well.

If you get an error inside useEffect that it is unable to find scan on docClient or similar to it, put docClient in the dependency array, check for it inside the function and it should work.

import * as AWS from "aws-sdk";
import { Link } from "react-router-dom";
import { useEffect, useState } from "react";

AWS.config.update({
  region: "some where",
  endpoint: "out there",
  accessKeyId: "key",
  secretAccessKey: "secret",
});

const docClient = new AWS.DynamoDB.DocumentClient();

export function DisplayTitles(props) {
  const [data, setData] = useState([]);
  var params = {
    ProjectionExpression: "title",
    TableName: props.tableName,
  };

  useEffect(() => {
    docClient.scan(params, function (err, data) {
      if (data) {
        setData(data["Items"]);
      } else {
        console.log(err);
      }
    });
  }, []);

  return (
    <ul>
      {data.map((link) => (
        <li key={link.id}>
          <Link to="/">
            {link.title}
          </Link>
        </li>
      ))}
    </ul>
  );
}