But I can't seem to update the state of the book component from a different screen so when I exit and enter again the newly appended vocabulary words disappear.
What do I do?
Related
I have a feature need to implement that is when I'm on the map, I can click in any map position(coordinate) to get the data (data can be many or single) that the position contains. If data is many, it will display a list of items to choose from and see the details, otherwise is a single item.
In case data is many, After I click on the view button to see the item details I want to switch to another position. The weird behavior here is that from the state of details, React didn't render directly to the new position's data, it jumps back to the firstly rendered state then renders the data based on the new position. I want it not rendered back to the list state again, instead renders directly to the new position's data.
How do I achieve that?
Here is the full source code for this sample: https://codesandbox.io/s/crazy-wilbur-rgqrb?file=/src/Map.js
I have a file, app.js, which contains some React code. The code producess something like a rudimentary kanban board. Right now, the user can create a new div for the board, and then edit or drag the div into a column. However, the state is not preserved if the div has been edited before dragging across columns; the div contents will disappear.
I have tried editing the code in the returned div, modifying the isContentEditable property, but to no avail; the state is lost, and the entered content dissapears, leaving an empty div.
For reference, here is the code in a sandbox:
https://codesandbox.io/s/sweet-feather-80261
All help is appreciated, total noob to front end development!
Try using the useState hook for functional components, or look into Redux to implement global state!
Redux will allow you to have state that can be changed and used by multiple components.
Imagine there is a list being rendered on clicking search with some info in it. when i click on one of the search results another component like a card needs to be rendered on top of the results which is more detailed. I want the component to be floating on top of the other while they both are still being rendered. How would i achieve something like this ?
In ReactJs, what would be the best way to breakdown the component hierarchy in a multi-page application ? For an example take an application with two columns. Left most column is the side bar and the right most column is for loading different views.
One view flow would be as follows. Side bar contains a link to view a list of products. Once the link is clicked a set of product with brief descriptions would be loaded into the right hand column.
If the user selects a specific product, the a full detailed view of that product would be loaded in the same panel replacing the original list view.
Now does that full detailed view component comes under the product list component as it's loaded by clicking on a product or is it better to keep it as a child component of the main application ?
You can take a look at 'Thinking in React' link which kind of goes over the same theory on what you are asking which is how do i breakdown my components.
https://reactjs.org/docs/thinking-in-react.html
You should put your data where you have to click/or triggering an event that will make your data change. In this case you would have to click on a link to trigger a product list, then click on the product to trigger product description.
You should not go more than 1 layer deep if you are passing state so don't pass it from parent to child to child. If this is the scenario you should move your state lower.
I hope this gets you going and thinking towards the right path.
I'm having a hard time understanding how animate components in React when it involves elements within child components. To set the stage, I have:
A button group component that contains some buttons.
A navigation component that contains some button groups. The navigation component creates arrays of button names and callbacks and then passes them to button group components as props.
Lets say the user takes some action on a page that will change the nav. More specifically, I want to fade out one of the buttons from one of the button groups in the nav.
I'm familiar how to use ReactCSSTransitionGroup and would think to use this in this case, but the tricky part is that the navigation component is the the thing that owns the animation trigger, and the button group component is the thing that owns the button that needs fading. When the navigation component re-renders, it throws away the old button group from the DOM and builds an entirely new one which means the old button group never has the opportunity to fade its button out.
Questions:
Am I using the wrong abstractions here? If I want to fade out the button based on nav state, does the button have to belong to the nav and not in some child component?
When the nav re-renders and new props are given to the button group, why does the button group get trashed and rebuilt rather than the existing one just getting a propsWillChange call?
You're right, it sounds like your child button group components shouldn't need to re-render.
If you're iterating over an array of name/callback pairs to build the buttons, make sure each button is being given a unique key attribute; maybe the name, if that is unique. That will give React a way of identifying which buttons to add or remove and which to leave in place.
With that, your ReactCSSTransitionGroup should work as expected.