How to create a forum in React
Published: 2024-01-11 07:39:20

First, create a project with Vite:

```
npm create vite@latest
```

After clean up, the project tree should looks like this:
```
├── client
  ├── node_modules
  ├── package.json
  ├── package-lock.json
  ├── public
  ├── src
    ├── App.jsx
    ├── index.css
    └── main.jsx
  ├── .gitignore
  ├── index.html
  └── vite.config.js
```

Add this boilerplate to App.jsx. This should print the input values at the browser console:
```
import { useState } from "react";

function NewTopic() {

  const [title, setTitle] = useState(String);
  const [content, setContent] = useState(String);

  const Submit = (e) => {
    e.preventDefault();

   console.log(title, content)
  };

  return (
    <>
      <form onSubmit={Submit}>
        <input onChange={(e) => setTitle(e.target.value)} value={title} />
        <textarea onChange={(e) => setContent(e.target.value)} value={content} />
        <button type="submit">Create</button>
      </form>
    </>
  )
}

export default NewTopic;
```

For sending the input data to a server, we'll use Axios library:

```
import axios from 'axios';

const Submit = (e) => {
    e.preventDefault();

    try {
      axios.post('http://localhost:3001/createPost', { title, content })
    } catch (error) {
      console.log(error);
    }
  };
```

Now create a Node server with Express.js library:

server.js
```
const cors = require('cors');
const express = require('express');
const app = express();
const server = require('http').createServer(app);

app.use(cors());
app.use(express.json());

server.listen(3001);
```
The current project tree should looks like this:

```
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── public
├── server.js
├── src
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
└── vite.config.js
```
To keep our input data in one place, we'll use Mongo Database.
To get your own Mongo Database URL fallow [this url](https://www.mongodb.com/cloud/atlas/register).
Add all the Mongoose library functionalities to the server.js:

```
const mongoose = require('mongoose');
const { Schema } = mongoose;

mongoose.connect("mongodb+srv://username:password@cluster0.ufesskg.mongodb.net/forum-database");

const databaseSchema = new Schema({
  title: String,
  content: String
});

const Post = mongoose.model('Post', databaseSchema);
```
Then, to give a response to coming request from React-side, create an endpoint in server.js:

```
app.post('/createPost', (req, res) => {
  Post.create({
    title: req.body.title,
    content: req.body.content
  });
});
```
Screenshot from [https://cloud.mongodb.com](https://cloud.mongodb.com)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ofu718y6ufelxfhha4q.png)

The above code is just creates post. Now, return all posts to React-side for creating a simple forum:

```
app.post('/createPost', (req, res) => {
  Post.create({
    title: req.body.title,
    content: req.body.content
  });

  Post.find().then(PostFind => {
    var allData = PostFind;

    return res.json({ allData });
  });
});
```

Now, back to the React-side to fetch `res.json({ allData });` response with Axios.

We'll use Javascript map function, because we must list all the data to line down as column.

The final React-side code:
```
import { useState } from "react";
import axios from 'axios';

const NewTopic = () => {

  const [title, setTitle] = useState(String);
  const [content, setContent] = useState(String);
  const [allData, setAllData] = useState(null);

  const Submit = (e) => {
    e.preventDefault();

    try {
      axios.post('http://localhost:3001/createPost', { title, content }).then(TheResponse => {
        setAllData(TheResponse.data.allData);
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <form onSubmit={Submit}>
        <input onChange={(e) => setTitle(e.target.value)} value={title} />
        <textarea onChange={(e) => setContent(e.target.value)} value={content} />
        <button type="submit">Create</button>
      </form>

      <div>
        {
          allData.map((mapAllData) => (
            <div>
              <p>Title: {mapAllData.title} ||||||||||| Content: {mapAllData.content}</p>
            </div>
          ))
        }
      </div>
    </>
  )
}

export default NewTopic;
```
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf8ahp2ue2dw5vmfvnar.png)

If you'll have encounter an error, remove the `"type": "module",` line from the `package.json`.

Don't forget running both of express server and React-side client:
`node server.js`
and for React:
`npm run dev`

https://github.com/Blainegith/devto-react-forum