We Keep Coding

How to make two rows inside one row react-virtualized?

I need to make for some rows react-virtualized from table, create 2 rows, 1 row it is row react-virtualized second row it is my custom row
Ho to do it, maybe has some example?
I tried use defaultTableRowRenderer() function,as far as I understand, this embeds newlines in react-virtualized table, but I not need this
its must look like this
table
My code look like this
return (
<>
<div style={{ height: "90vh" }}>
<AutoSizer>
{({ width, height }) => (
<TableVirtualized
headerHeight={70}
height={height}
overscanRowCount={5}
rowHeight={ 80}
rowCount={rowItems.length}
rowGetter={({index}) => rowItems[index]}
width={width}
className={className}
rowRenderer={rowRenderer}
>
{headerTitles.map((v:any, i:any)=>{
const key = Object.keys(v);
return (
<Column
label={v[`${key}`]}
dataKey={key}
width={200}
cellRenderer={(v: any)=> cell(v)}
key={i}
headerRenderer={()=> formatHeader(v[`${key}`])}
/>
)
}
)}
</TableVirtualized>
)}
</AutoSizer>
this my rowRender function. I think this is a bad way, because row react-virtualized height is fixed
const rowRenderer = (props: any) => {
const { index, style, className, key, rowData } = props;
if(rowData.attributes){
return (
<div className={cellProps.attributes.className}>
{defaultTableRowRenderer(props)}
<div className='blabla'>1</div>
</div>
)
}
return defaultTableRowRenderer(props);
}

Is there a React higher order component to replace someData.map(functionReturningComponent)?

I find code like this to be hard to read:
<Row>
<Column>
{someData.map((value, idx) => (
<Component key={idx}>
<ChildComponent value={value.foo}/>
<ChildComponentTwo value={value.bar}/>
</Component>
)}
</Column>
</Row>
Is there a HOC to replace Array.prototype.map? Say, List that takes a component and generates N components given an array of N items of data mappable to the props of the passed-in component?
declare const data: {value:string}[]
const MyComponentList = List(MyComponent)
<Row>
<Column>
<MyComponentList data={data}/>
</Column>
</Row>
and then Component = ({foo, bar}) => (<>
<ChildComponent value={foo}/>
<ChildComponentTwo value={bar}/>
</>)
Now I don't need map anywhere except I guess in the definition of List. The JSX is much easier to read. But when I search things like "HOC react replace array map JSX" I don't find anything. I suppose List should also inject key={idx} into the "child" components where idx comes from dataArray.map(dataToGoToChild, idx) => <ChildComponent key={idx} {...dataToGoToChild}/>

How to measure cell size in react virtualized table

I'm trying to do autosized cell in react-virtualized Table.
Here is the table:
<AutoSizer>
{({ height, width }) => (
<Table
width={width}
height={height}
headerHeight={20}
rowHeight={30}
deferredMeasurementCache={cache.current}
rowCount={usersData.length}
rowGetter={({ index }) => usersData[index]}
cellRenderer={cellRenderer}
>
<Column label="User Data" dataKey="userData" width={width / 2} />
<Column label="Activities" dataKey="userActivity" width={width / 2} />
</Table>
)}
</AutoSizer>
Here is cellRenderer:
function cellRenderer(props) {
console.log(props);
return (
<CellMeasurer cache={cache} columnIndex={props.columnIndex} parent={props.parent} rowIndex={props.rowIndex}>
<div>{props.cellData}</div>
</CellMeasurer>
);
}
And as I saw guide for List I thought cellRenderrer should be in Table component, but it does nothing.
If i put cellRenderrer in column component it doesn't have key and style props to work correctly.
What am I supposed to do?

I solved my problem from example: https://github.com/bvaughn/react-virtualized/blob/e360d958b99fa965fd3f1caed4506403ad652cd3/source/CellMeasurer/CellMeasurer.DynamicHeightTableColumn.example.js

how to dynamically add SelectOption in React.js

There is a list l:
l = [
["a","b"],
["c","d"]
]
I want to make a SelectOption field dynamically with this list for which I write:
<Field
name="successData.val"
render={({ field: { name } }) => (
<Column>
<Select
onChange={value => setFieldValue(name, value)}
placeholder="dummy"
width={300}
>
{l.forEach(key => (
<SelectOption
value={key[0]}
label={key[1]}
/>
))}
</Select>
</Column>
)}
/>
But when I click the drop down button, the list doesn't appear, just the upper borderline of the box gets highlighted, it seems the drop down is getting generated, but not correctly.
Can anyone please suggest what might be wrong in this implementation?

Use map()
{l.map(key => (
<SelectOption
value={key[0]}
label={key[1]}
/>
))}

React with AntDesign Lists and Firebase Firestore Data

I'm trying to figure out how to present data from firestore in a react app, using Ant Design's List.
The List is set up like so:
const data = [
{
title: 'Ant Design Title 1',
},
<List
itemLayout="horizontal"
dataSource={data}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={{item.title}}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
)}
/>
I want to try to put firebase data into the const data - so that the title can be a user.name.
In my component I have:
{loading && <div>Loading ...</div>}
{users.map(user => (
<li key={user.uid}>
I'm trying to convert this to work with Ant Design's list like so:
const data = [
{
//title: `{user.name}`,
title: {user.name},
}
];
<List
itemLayout="horizontal"
dataSource={data}
renderItem={users.map(user => (
// renderItem={item => (
<List.Item>
<List.Item.Meta
// avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={item.title}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
))}
/>
When I try this, I get an error that says:
TypeError: renderItem is not a function
Is there an example of how to put data into an Ant Design list using react?

If your firebase users source is an array of objects then just add it directly to dataSource prop.
<List
itemLayout="horizontal"
dataSource={users}
renderItem={item => (
<List.Item>
...
</List.Item>
)}
/>