Access to XMLHttpRequest from origin 'http://localhost:3000' has been blocked by CORS policy

See also questions close to this topic

• To Use this.props in constructor of subclass in react ,we need to call super(props), Confused about this statement?

  class MyComponent extends React.Component {    
  constructor(props) {
      super()
  
      console.log(this.props)
      // -> undefined
  
      // Props parameter is still available
      console.log(props)
      // -> { icon: 'home', … }
  }
  
  render() {
      // No difference outside constructor
      console.log(this.props)
      // -> { icon: 'home', … }
  }
  

  } I saw the above code snippet in one answer but my doubt is about the confusion on (this), if we are calling using this it refers to the current instance of the class, so if we are passing the props to the subclass, then why we need to call explicitly super(props) not super() only, I am not able to get the exact reason after reading many answers ...Please explain in brief..I am a newbie in React..
• The website gets stuck when I click next question

  When I click the button my website stucks I dont know what is happening. I am using the while loop to not repeat the question in my quiz app. Help will be appreciated. The App and Questions function components are listed below. I am bringing my questions from an object array.

  App.js

  '''
  
  import "./App.css";
  import Questions from "./layout/Questions";
  
  function App() {
    return (
      <div>
        <Questions />
      </div>
    );
  }
  
  export default App;
  
  
  '''
  

  Questions.js

  
  
  
  import React, { useState } from "react";
  import mcqs from "../data/mcqs";
  
  const Questions = () => {
  const handleButtonClick = () => {
   setquestionCounter(questionCounter + 1);
  };
  let randomQuestion = Math.floor(Math.random() * mcqs.length);
  let [questionCounter, setquestionCounter] = useState(1);
  
  if (questionCounter <= mcqs.length) {
   while (mcqs[randomQuestion].question === "999") {
     randomQuestion = Math.floor(Math.random() * mcqs.length);
   }
  }
  const string = mcqs[randomQuestion].question;
  mcqs[randomQuestion].question = "999";
  return (
   questionCounter <= mcqs.length && (
     <div className="questions">
       Q{questionCounter}:{string}
       <button onClick={handleButtonClick}>Next Question</button>
     </div>
   )
  );
  };
  
  export default Questions;
  
  
  
• how to create poll using API with react functional component

  this is my react js code and I want to connect with my node js API but I don't understand how to that ...!

  import React, { useState } from "react";
  import Poll from "react-polls";
  // import "./styles.css";
  
  /**
   * https://stackoverflow.com/questions/65896319/react-js-class-poll-convert-into-react-hooks-poll
   */
  
  // Declaring poll question and answers
  const pollQuestion = "Youtube is the best place to learn ?";
  const answers = [
    { option: "Yes", votes: 7 },
    { option: "No", votes: 2 },
    { option: "don't know", votes: 1 },
  ];
  
  const Fakepolls = () => {
    // Setting answers to state to reload the component with each vote
    const [pollAnswers, setPollAnswers] = useState([...answers]);
  
    // Handling user vote
    // Increments the votes count of answer when the user votes
    const handleVote = (voteAnswer) => {
      setPollAnswers((pollAnswers) =>
        pollAnswers.map((answer) =>
          answer.option === voteAnswer
            ? {
                ...answer,
                votes: answer.votes + 1,
              }
            : answer
        )
      );
    };
  
    return (
      <div>
        <Poll
          noStorage
          question={pollQuestion}
          answers={pollAnswers}
          onVote={handleVote}
        />
      </div>
    );
  };
  
  export default function App() {
    return (
      <div className="App">
        <Fakepolls />
      </div>
    );
  }
  

  It work's fine with

  // Declaring poll question and answers
      const pollQuestion = "Youtube is the best place to learn ?";
      const answers = [
        { option: "Yes", votes: 7 },
        { option: "No", votes: 2 },
        { option: "don't know", votes: 1 },
      ];
  

  but I want to connect this poll with my API instead of Declaring it ..! this is my api- to get data -> ( router.get("/poll/:pollId", getPoll); //)

  exports.getPoll = async (req, res, next) => {
    try {
      const { pollId } = req.params;
      const polls = await Poll.findById(pollId);
      if (!polls) throw new Error("no polls found");
      res.status(200).json(polls);
    } catch (error) {
      error.status = 400;
      next(error);
    }
  };
  

  This is a postman image -

  and this API for POST data- and my node js code -

       exports.votes = async (req, res, next) => {
    try {
      /**
       * 1. get the poll from db
       * 2. check if the user already exists in any option
       * 3. if user has already selected any option do nothing
       * 4. if user has selected any other option remove from that option
       * 5. if user does not exist in any option, insert his user id to selected option
       */
      const { pollId } = req.params;
      let { userId, answer } = req.body;
      // get selected poll from db
      const poll = await Poll.findById(pollId);
      if (answer && poll) {
        answer = answer.toLowerCase();
        ///Finf the Poll
  
        let existingVote = null;
        Object.keys(poll.options).forEach((option) => {
          // loop on all options, check if the user already exists in any option
          if (poll.options[option].includes(userId)) {
            existingVote = option;
          }
        });
        if (existingVote == null) {
          // if there is no existing vote save it to db
          try {
            const push = {};
            push[`options.${answer}`] = userId;
            const update = await Poll.findByIdAndUpdate(
              pollId,
              { $push: push },
              { upsert: true }
            );
            res.status(201).json(update);
          } catch (err) {
            error.status = 400;
            next(error);
          }
        } else if (existingVote && existingVote.length > 0) {
          // check if answer is same as previous, if yes send not modified
          if (existingVote.toLowerCase() === answer.toLowerCase()) {
            res.status(304).send("Response already saved");
          } else {
            // delete the previous response and save it in new
            if (
              Array.isArray(poll.options[existingVote]) &&
              poll.options[existingVote].length > 0
            ) {
              // TODO: filtering this is not returning array but 1
              poll.options[existingVote] = poll.options[existingVote].filter(
                (vote) => vote != userId
              );
              poll.options[answer] = poll.options[answer].push(userId);
              const update = await Poll.findByIdAndUpdate(pollId, {
                $set: { options: poll.options },
              });
              res.status(201).json(update);
            }
          }
        } else {
          error = {
            status: 500,
            message: "Something went wrong",
          };
          next(error);
        }
      } else {
        error = {
          status: 404,
          message: "Poll not found",
        };
        next(error);
      }
    } catch (error) {
      error.status = 400;
      next(error);
    }
  };
  

  this is a POSTMAN image using POST to store data --- >

  how can I connect API with react poll