reactjs / reactjs/react.dev

Translation feature in concurrent mode's example CodeSandbox might not work.

Open
#3,473 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

https://reactjs.org/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state
In above section's example CodeSandbox, yandex-translate is used for translation feature.

But, translation doesn't work when I open the CodeSandbox.
↓ The translation result should appear under the input.
スクリーンショット 2021-01-02 1 55 41

And I got a following message from the response of translate().

// fakeApi.js
export function fetchTranslation(text) {
  const promise = new Promise(
    (resolve, reject) => {
      translate(
        text,
        {
          to: "fr"
        },
        (err, res) => {
          if (err) {
            reject(err);
          } else {
            console.log(res) // <- Added this line
            resolve(res.text);
          }
        }
      );
    }
  );
  return wrapPromise(promise);
}
code: 404
message: "Maximum daily translated text volume exceeded"

This is not an example code's bug, but it can be confusing for beginners. (Actually, I suspected a bug in the React part of the code at first.)
Can we avoid this problem? For example, use other translation feature, use another plan(?) of yandex-translate.

Thanks.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open the concurrent mode patterns documentation and its linked CodeSandbox, then inspect the example's fakeApi.js translation path. Confirm why the yandex-translate request returns the reported quota error and determine a supported way to keep the example usable. Done means the translation result appears under the input without relying on an unavailable translation quota.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.