I am mapping of array of object which multiplies my component, its working properly but the problem is when I add another object to it somehow its hidden not sure why
{EditMultiObject.map((object, key) => (
<SubFormEditCom
key={key}
identifyNumber={key}
onEditBasicChange={onEditBasicChange}
onEditCalendarChange={onEditCalendarChange}
onEditChangeUrl={onEditChangeUrl}
lastObject={EditMultiObject.length === key + 1 ? true : false}
onEditAddNewObject={onEditAddNewObject}
/>
))}
You will noticed the first element is the initial object I set the second is the one I created when I click a add button. The style on the second div is missing(the newly added one) an inline style, note that I didnt even put an inline style in my code I assume it was added by react
I think I know now whats the solution for this I think its because of the third party library
Related
I have a bool called isStarted that is initially set to false.
I have two divs, one that has:
hidden={isVisible}
and the other has:
hidden={!isVisible}
I have a href link that has a onclick that calls a function which changes the bool value to it's inverse value. I confirm this by also console.logging the bools value. Each time I click it the value changes.
However the the divs do not change visibility, it just keeps showing the first one.
div1:
<div
className="relative"
hidden={isVisible}
> div1 </>
div2:
<div
className="relative"
hidden={!isVisible}
> div 2 </>
I also confirmed these divs show independently by manually setting the isVisible to true and false at the start.
EDIT:
This way works to change the visibility also, but only works the first time when the app goes live:
{isVisible && <div>wow</div>}
However when I click and change the isVisible value it still won't change the divs.
The hidden HTML attribute does not exist. You might be looking for the display CSS attribute.
<div style={{ display: none }} />
Offtopic personal suggestion: I'd suggest you starting learning React using TypeScript from the beginning. TS will warn you when an attribute does not exist and help you on your learning path.
EDIT:
It is display: none (removes the element) or visibility: hidden (hides but still takes space. I might have been on drugs when writing this.
I am using antd "antd": "^3.26.3", to develop a app, now the table have a + like this:
I did not add any setting to add the +, why the + come out? what should I do to remove the +? this is my antd table source code:
<div className={styles.tableList}>
<StandardTable
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
loading={loading}
data={data}
columns={this.columns}
selectedRows={[]}
rowKey="_index"
hideAlert
disablePagination={false}
expandIconAsCell={false}
expandIconColumnIndex={-1}
onChange={this.handleStandardTableChange}
/>
</div>
I have tried to add this config but still did not make the + disappear, what should I do to fix it?
expandIconAsCell={false}
expandIconColumnIndex={-1}
In antd Table component, + icon represents a row that can be expandable when clicked. By default, it is not expanded so when you clicked on + it will expand.
There are basically two cases in which + can appear in the rows of the table.
Using expandable api, expandable api allow us to render something things (data) by clicking + or anywhere in the whole row (this can be set by expandRowByClick as true). A common example for this case can be found here.
Using children property in the data prop. Example.
Even if children property has an empty array, it will still show the + icon and when it is clicked it will expand with some extra spaces but no data in it.
Note: You should not use both the ways in one antd Table. So, you always have to choose one way over another depending upon the use cases.
In your case, you have mentioned that you have children property in your dataset which is a boolean value and has a different purpose than the children property of antd table dataset.
As I have mentioned in my comments, you just need to alias the children property to some other name, maybe haveChildren when mapping your dataset to a custom dataset.
I have problem rendering page based on array of templates stored in redux. I'm unable to provide the actual code as it is too complex to reproduce in sandbox, but I will try with simplified structure.
I have pinterest-style grid based on flex-grow and js calculations for each item based on its dimensions so I need to have all of this inside one container.
I have 3 groups of items in same div:
blank_item + templates.map + tailItems.map
<div className="grid">
{shouldRenderBlankItem && <BlankItem />}
{templates.map((template) => (
<Template
key={template.uuid}
template={template}
/>
))}
{shouldRenderTail &&
tailItems.map(item, i) => (
<TailItem
key={i}
item={item}
/>
))}
</div>
The problem is - sometimes after render I have EXTRA children left from previous render and React puts them in front of other elements within div.grid so the result I have will look like:
3-4 of EXTRA <Template/> + blank_item + templates.map + tailItems.map
As a key for Template I use template.uuid that is coming from backend and I know they're unique and react also doesn't show any warnings for duplicated keys - so I know I'm not getting any duplicated items from API what I thought might be an issue.
Redux is fine - I see correct number of templates in it e.g. 50, grid and react dev tools shows same 50 templates coming as a prop when I inspect parent component, but the actual DOM has e.g. 53 elements in the same moment.
How can I debug issue like this? I suppose something is wrong during reconciliation but I don't know where exactly to start debugging this.
I have React/ReactDOM 16.13.1
Ok so in my case the problem was broken backend api which might return same template twice - so uuid's that I use for keys were unique for each template but they are not really unique in terms of the page and DOM elements.
I faced this only in production build that is why I didn't have duplicated key warning (on dev build I have another DB with much less templates so I was unable to reproduce this).
So anyone facing similar issue: go check your keys are really unique within page, because what happens after new templates load comes:
React wants to remove old item
It searches corresponding DOM element for each key and finds item with key="XXX" and removes it from DOM
Their duplicated items stays in DOM as corresponding key was processed and React doesn't care about this particular key anymore
We load new templates and they get appended to the parent container
Voila! We have old items before newly loaded
What I did here - my key now is:
templates.map((template, i) => <Template key={template.uuid + i} />
So in this case I am safe even if backend returns duplicated items.
Of course we will fix backend as well. Thanks for reading and helping!
Just quick example how to search for items with same id in data:
var duplicates = new Set();
data.map(t => t.id).forEach((id, i, arr) => {if(arr.filter(item => item == id).length > 1){
duplicates.add(id);
}});
console.log("DUPLICATED IDs:", duplicates)
I am new to react and I need your help.
I have shared a sandbox link, In that everything works perfectly. But when we add couple new row(by clicking + at rightmost columns of the row) then if we remove some row(by clicking - at rightmost columns of the row) and then again add a new row then edit that row cell I am getting Cannot set property error. I know I have to do some changes in the handleDelete function but not getting what exactly to do. So is anyone experts here, please help me out.
And regarding Icon except the last row every other row should have - icon.
Thank you. Comment if you need any clarification.
Sandbox link: https://codesandbox.io/s/suspicious-microservice-qd3ku?file=/index.js
render method actually passes third argument which is actually an id of your component, in your case you don't recalculate the id and that is why your dataSource[key] tries to access key that doesn't exist in dataSource anymore.
render: (text, record, id) => (
<Input
{/* ... */}
onChange={e => this.onChange(e, id)}
/>
)
Here I updated your codesandbox https://codesandbox.io/s/angry-proskuriakova-6f2u0?file=/index.js:1095-1109
Please let me know if you have any questions.
I am using react-animated-css, for simple animation in react. I have a list which I am rendering in a <ul> tag. I am adding animation to the first element of the list.
This list is getting updated every 3 seconds. And new element is added at the first position in the array.
The problem is, on load the animation is happening but not on update.
Here is full code : https://codesandbox.io/embed/ecstatic-cloud-qdpcj
I am not able to create a tag with 'react-animated-css' name as I am not eligible. It would be helpful if someone creates one for this.
You must define a key property for every element in a map. If you do not define one the array index is the default key. So the first element with key 0 will be reused after each render and only the last one will be added. If you define a key, the redrawing will based on the key value, and the first one will be added.
{items.map((d, i) => {
if (i === 0) {
return (
<Animated
key={d}
animationIn="bounce"
animationOut="flash"
animationInDuration={1000}
animationOutDuration={1000}
isVisible={true}
>
<li>{d}</li>
</Animated>
);
Here is the example: https://codesandbox.io/s/pedantic-darkness-vgp3f
From my point of view "react-animated-css" this library is not getting re-rendered once the state gets updated.
I have tried it with simple css animation property "#keyframe" and is working fine and getting re-rendered when state changes.
Code-sandbox link :
https://codesandbox.io/s/suspicious-dijkstra-h1q7u