Develop Reference

React table rowProps prop doesnt log anything

[Basically, we're using this from one of our libraries. But the thing is while using it through our package the rowProps prop doesn't work]
(https://i.stack.imgur.com/fER2B.png).
import { AdvancedTable } from "ims-ui-kit";
function Table(props) {
console.log(props)
return <AdvancedTable {...props} />;
}
export default Table;
Here is another screenshot of the prop passing through the table we are using. It doesn't log anything.
[enter image description here]
<>
{alert}
<div className="content">
<ReactTable
// hasBulkActions={true}
data={data}
filterable
{...rest}
resizable={false}
columns={columns.slice()}
defaultPageSize={10}
showPaginationTop
showPaginationBottom={false}
className="-striped -highlight"
rowProps={(row) => {
onclick = () => {
console.log("hello", row);
};
}}
/>
<Modal title="Risk management">
<RiskDetail isModalOpen={isOpen} />
</Modal>
</div>
</>

Create custom TabPane using react-bootstrap

I would create custom Tab Form from JSON, using React and boostrap. Using this function my code work correctly.
function DisplayForm(props) {
return(
<div className="row">
<Tabs className="mb-3">
{Array.from(new Map(Object.entries(json))).map((data) => (
<Tab eventKey={data[0]} title={data[0]}> </Tab>
))}
</Tabs>
</div>
);
}
}
data[0] is the tabName.
Now, I would create custom tab, based on json value. For example, something, like this:
function DisplayCustomTab(props) {
return(
<div className="row">
<TabContainer className="mb-3">
<TabContent>
{Array.from(new Map(Object.entries(json))).map((data) => (
<>
{(() => {
if(myCondition ) {
return(
<>
<CreateTAB data={data[0]} />
</>
)
}
})()}
</>
))}
</TabContent>
</TabContainer>
</div>
);
}
function CreateTAB(props) {
console.log("tab name: " + props.data); // this line works
return(
<TabPane eventKey={props.data} title={props.data}> </TabPane>
);
}
I using TabPane, TabContent and TabContainer because using Tab and Tabs I get following error:
component is not meant to be rendered! It's an abstract component that is only valid as a direct Child of the `Tabs` Component. For custom tabs components use TabPane and TabsContainer directly
Anyone can explain where I'm wrong? Thank you

Dynamic nested accordion with nested children

I am trying to build a reusable accordion, i was able to create an accordion with one level, but here i am stuck to have the nested accordion.
What i have tried so far
App.js
import "./styles.css";
import Accordion from "./Accordion";
import LIST from './Constants';
const listMaker = (item) => {
let faqItem;
if (item.children.length === 0) {
faqItem = (
<>
<Accordion title={item.name}></Accordion> <hr />
</>
);
} else {
let faqItemChildren = item.children.map((item) => {
let faqItem = listMaker(item);
return (
<>
${faqItem}
<hr />
</>
);
});
faqItem = <Accordion title={item.name}>{faqItemChildren}</Accordion>;
}
return faqItem;
};
let listItems = LIST.map((item) => {
let menuItem = listMaker(item);
return menuItem;
});
export default function App() {
return listItems;
}
have added codesandbox
I am new tor react, Any help is appreciated

Instead of using dangerouslySetInnerHTML you can use the children, as you need is a spread of React.ReactChildren. That would be just calling the {children} from props instead of the dangerouslySetInnerHTML
<div className="accordion__section">
<button className={`accordion ${setActive}`} onClick={toggleAccordion}>
<p className="accordion__title">{title}</p>
<Chevron className={`${setRotate}`} width={10} fill={"#777"} />
</button>
<div
ref={content}
style={{ maxHeight: `${setHeight}` }}
className="accordion__content"
>
{children}
</div>
</div>
Here is a forked solution of your codesandbox.
Also, Instead of setting the DOM to a variable, as its a conditional scenario, you can use the ternary operator, which helps in better readability.
const listMaker = (item) => {
return (
<>
{item.children.length === 0 ? (
<Accordion title={item.name} />
) : (
<Accordion title={item.name}>
{item.children.map((childItem) => {
return listMaker(childItem);
})}
</Accordion>
)}
</>
);
};

dangerouslySetInnerHTML is to use with strings. You shouldn't give an array of components to it. Yet you don't send any prop called content anyway. I think you meant children prop there. Just render children instead of using dangerouslySetInnerHTML
In your Accordion component replace this:
<div
className="accordion__text"
dangerouslySetInnerHTML={{ __html: props.content }}
/>
With this:
<div className="accordion__text">
{ props.children }
</div>

React function to wrap a jsx element

I'm trying to create a function that will return a jsx element wrapped with and elements. How to do this?
In my code, I have a lot of the following:
<Top />
<Home />
<Bottom />
<Top />
<About />
<Bottom />
<Top />
<Contact />
<Bottom />
<Top />
<Blog />
<Bottom />
<Top />
<API />
<Bottom />
etc.
How can I make a function which takes say <Home /> as an input parameter and returns a wrapped jsx element?
I've tried:
function wrap(???){
return (
<Top />
//what goes here????
<Bottom />
)
}
I'm afraid I'm still getting used to the syntax and can't figure it out

first, you need to wrapp the return with a root element, a div for exp, or a Fragment which is released in React 16.2, in this exp i used a div:
function wrap(Wrapped) {
return (
<div>
<Top />
<Wrapped />
<Bottom />
</div>
)
}
Edited: you could use the render children method also:
const WrapperExp = props => {
return (
<div>
<h1>top</h1>
{props.children}
<h1>bottom</h1>
</div>
)
};
const App = () => (
<WrapperExp>
<h2>tada...</h2>
</WrapperExp>
);
take a look at this codesandbox exp.

The correct syntax should be
function wrap(component) {
return (
<Top />
{component}
<Bottom />
);
}
and maybe if you use wrap in a render method
render() {
const aComponent = (<Home/>);
return (
{wrap(aComponent)}
);
}

Nice way in React to Map an array data to Card Decks

I have an array of objects. And I can't figure out how do I create multiple card decks with 3 cards in each one, as on the image:
An example is below:
import { Card, Button, ... CardBlock } from 'reactstrap';
export default const Example = (props) => {
return (<div>
<CardDeck>
<Card>
<CardImg top width="100%" src="https://..." />
<CardBlock>
<CardTitle>{data.title}</CardTitle>
<CardSubtitle>{data.subtitle}/CardSubtitle>
<CardText>{data.text}</CardText>
<Button>Button</Button>
</CardBlock>
</Card>
<Card>
...
</Card>
<Card>
...
</Card>
</CardDeck>
<CardDeck>
...
</CardDeck>
...
</div>
);
};

If your question is about how to iterate over your array then you can use Array.prototype.map() for it.
An example from the react docs with map() call using an arrow function:
By saving the components in a temporary variable:
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
By using map() inline:
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
EDIT:
Do not render multiple <CardDeck> components. Instead adapt your css so that a <Card> will wrap into the next row when there are more that three. Then you only have to map the data inside your array once and not for every <CardDeck> again.