CODEWITHSUNDEEP
reactjsreact-hooksfetch-apiuse-effectreact-hook-form
famo
famo

Reputation: 180

React Hooks(useEffect) form Sub mission

I am trying to create a react form to submit a post to an array of posts that is in a mock API. here I use effect and fetch API, in the post component, I am listing all posts and it's showing properly, I am having some issues when submitting my form, if anyone can know, please check.

my code is below

app js

import React from 'react';
import Addpost from './Addpost';
import './App.css';
import Post from './Post';

function App() {
  return (
    <div className="App">
        <Addpost />
        <Post />
    </div>
  );
}

export default App;

post js

import React, { useState, useEffect } from "react";
//https://5f61813d07c1770016c52193.mockapi.io/posts/
function Post() {
  const [post, setPost] = useState([]);


  useEffect(() => {
    async function fetchData() {
      const req = await fetch(
        "https://5f61813d07c1770016c52193.mockapi.io/posts/"
      ).then((r) => r.json());

      setPost(req);
      //console.log(req);
    }
    fetchData();
  }, []);



  return (
    <div>
      
      {post?.map((p, index) => (
        <div key={index}>
          <h3>{p.title}</h3> {p.body} <br /> <br /> <br />
        </div>
      ))}
    </div>
  );
}

export default Post;

addpost js

  import React, { useState, useEffect } from "react";

function Addpost() {
  const [post, setPost] = useState([]);
  const [title, SetTilte] = useState("");
  const [body, SetBody] = useState("");
  const [id, SetId] = useState();
  const [userId, setuserId] = useState();

  let new_post = {
    title: title,
    body: body,
    id: id,
    userId: userId,
  };
  async function postData() {
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title: "submited" }),
    };
    const req = await fetch(
      "https://5f61813d07c1770016c52193.mockapi.io/posts/",
      requestOptions
    ).then((r) => r.json());

    setPost(...post, req);
  }
  useEffect(() => {
    postData();
  }, []);

  function handleSub(e) {
    e.preventDefault();

    postData(new_post);
  }
  return (
    <div className="form">
      <form onSubmit={handleSub}>
        <input
          type="number"
          value={id}
          onChange={(e) => SetId(e.target.value)}
        />
        <input
          type="number"
          value={userId}
          onChange={(e) => setuserId(e.target.value)}
        />
        <input value={title} onChange={(e) => SetTilte(e.target.value)} />
        <input value={body} onChange={(e) => SetBody(e.target.value)} />

        <button>submit</button>
      </form>
    </div>
  );
}

export default Addpost;

Error message which is showing up in chrome console

5f61813d07c1770016c52193.mockapi.io/posts/:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
index.js:1 Warning: A component is changing an uncontrolled input of type number to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 
    in input (at Addpost.js:41)
    in form (at Addpost.js:40)
    in div (at Addpost.js:39)
    in Addpost (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)
console.<computed> @ index.js:1
5f61813d07c1770016c52193.mockapi.io/posts/:1 Failed to load resource: the server responded with a status of 400 (Bad Request)

Upvotes: 0

Views: 862

Answers (2)

Shahbaz
Shahbaz

Reputation: 178

for finxig this error please set you inputs type to text like below code

<input type="text" value={title} onChange={(e) => SetTilte(e.target.value)} />
<input type="text" value={body} onChange={(e) => SetBody(e.target.value)} />

i think your code have more problems, after fixing above problem ,commenting if you have more problems

Upvotes: 1

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

Regarding the posts to API, I think it's more of a API issue than the front-end. The return data is saying you've exceeded maximum elements

enter image description here

With regards to the console error

Warning: A component is changing an uncontrolled input of type number to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa)

Just initialize your state such that the value of the input components is already controlled initially and not undefined. e.g., empty strings

const [post, setPost] = useState([]);
const [title, SetTilte] = useState("");
const [body, SetBody] = useState("");
const [id, SetId] = useState("");
const [userId, setuserId] = useState("");

Upvotes: 1

Related Questions