nanoid | A tiny ( 130 bytes ) , secure , URL-friendly , unique | Runtime Evironment library

I will try to word this in the best way I can...

When I send a function through a prop to a child and then send it again to another child, then use the on click to activate it in the 'grandparent' function. When I console.log in that original function in the grandparent that console.logs a state, it prints undefined, yet when I am within that grandparent and try to activate that function, it will log the state correctly. If anyone can help me a little bit more in depth that would be great, we can call!

I'm getting my navbar routes from a json file like this:

I'm building a text editor using React with Typescript. The component hierarchy looks like this: TextEditor -> Blocks -> Block -> ContentEditable.

The ContentEditable is an npm package https://www.npmjs.com/package/react-contenteditable.

What i want it to do

The behavior I'm after is similar to Medium or Notions text editor. When a user writes in a block and hits enter on their keyboard, a new block should be created after the current block.

What it does

The behavior right now is strange to me. If I press enter and add one block, it works fine. But if I press enter again it overrides the previous block instead of creating a new one. However, if I press enter and add a block, then puts the carrot (focusing) on the new block and press enter again, a new block is added after as expected.

Sandbox

Here is a sandbox with the complete code: https://codesandbox.io/s/texteditor-mxgbey?file=/src/components/Block.tsx:81-557

TextEditor

I am getting the following warning in the console:

Trying add dynamic rows in HTML table (React). When, the props are passed on to a different compoment for rendering the table I get a warning Warning: Each child in a list should have a unique "key" prop. But when the table is rendered in the same component. No warnings!!!

I have looked into other solutions one, two, In solution three, the answer says The key needs to go on the outermost returned element. In your specific case, that means changing this:. Which I am returning from the row component, but the behaivior is different.

This throws warning

i still newbie in reactjs, and i try to build a some project. this project its to display any product price and stock, but here this problem.

i try to sum this number to get a total price in my product in reactjs, but the output always like this. how to fix that...

I am currently trying to import and use nanoid in my (Firebase) nodejs project. I installed it with

I use next-redux-wrapper, MSW, @mswjs/data and redux-toolkit for storing my data in a store as well as mocking API calls and fetching from a mock Database.

I have the following scenario happening to me.

1. I am on page /content/editor and in the console and terminal, I can see the data was fetched from the mock database and hydrated from getStaticProps of Editor.js. So now IDs 1 to 6 are inside the store accessible.
2. Now I click on the PLUS icon to create a new project. I fill out the dialog and press "SAVE". a POST request starts, it's pending and then it gets fulfilled. The new project is now in the mock DB as well as in the store, I can see IDs 1 to 7 now.
3. Since I clicked "SAVE" and the POST request was successful, I am being routed to /content/editor/7 to view the newly created project.
4. Now I am on Page [id].js, which also fetched data from the mock DB and then it gets stored and hydrated into the redux store. The idea is, it takes the previous store's state and spreads it into the store, with the new data (if there are any).
5. Now the ID 7 no longer exists. And IDs 1 to 6 also don't exist anymore, instead, I can see in the console and terminal that IDs 8 to 13 were created, and the previous ones are no more.

Obviously, this is not great. When I create a new project and then switch the route, I should be able to access the newly created project as well as the previously created ones. But instead, they all get overwritten.

It either has something to do with the next-redux-wrapper or MSW, but I am not sure how to make it work. I need help with it. I will post some code now:

Trying to get this ['Team Instinct', 'Team Valor', 'Team Mystic']

To this