I am dynamically rendering my tabs in React-Bootstrap, but somehow the eventKey doesn't recognise the values and the tabs aren't clickable.
Here's the code.
var tabButtons = tabsList.map(function(text, index){
if(text.enabled==1)
{
return <NavItem eventKey={index} key={index}><center> {text.value}</center></NavItem>; }
});
Here tabList is an array which contains information about whether the button is enabled. If yes, then display the button information.
The code where I am calling these tabs.
render() {
return (
<div>
<Tab.Container id="tab" defaultActiveKey="0">
<Row className="show-grid">
<Col sm={12}>
<Nav bsStyle="tabs" justified>
{tabButtons}
</Nav>
</Col>
<Col sm={12}>
<Tab.Content animation>
<Tab.Pane eventKey="0">
<FirstTabContent />
</Tab.Pane>
<Tab.Pane eventKey="1">
Second
</Tab.Pane>
<Tab.Pane eventKey="2">
<ThirdTabContent />
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
</div>
);
I have no idea, why aren't the eventKey able to use the index values.
Anything I am missing? Another approach perhaps?
Apparently after some hit and tries, got it working.
The problem was indeed in eventKey.
Replaced eventKey="0" with eventKey={0}
Though I have no idea what difference it makes. Anyone?
Related
I'm getting the key prop error and have tried several solutions to fix it. I tried the key={i} prop, and dropping the .name in the example below on a suggestion from a google search. Not sure why this isn't working, when the rest of the code works great. Any ideas? Thanks!
<Col className="coin-links">
<Title level={3} className="coin-details-heading">{cryptoDetails.name} Links</Title>
{cryptoDetails.links?.map((link) => (
<Row className="coin-link" key={link.name}>
<Title level={5} className="link-name">{link.type}</Title>
{link.name}
</Row>
))}
</Col>
The link.name may not be unique. That's why you are getting the error. You can make you of link.url since it's more likely unique.
<Col className="coin-links">
<Title level={3} className="coin-details-heading">{cryptoDetails.name} Links</Title>
{cryptoDetails.links?.map((link) => (
<Row className="coin-link" key={link.url}>
<Title level={5} className="link-name">{link.type}</Title>
{link.name}
</Row>
))}
</Col>
I am using a React-Bootstrap Tabbed Interface to map an array of users, and then ideally when clicking on each tab you will see various information for that user.
I've correctly been able to map the data, and I get unique info for each user within the data, but every tab's active status is enabled for all tabs because every tab has the same href and eventKey inside of my map function and I am having trouble conceptually trying to understand and figure out how to map through the array and have each eventKey and href be different for each Tab on each iteration...
TabbedInterface.tsx
<ListGroup>
{data.map((item: any, i) => (
<ListGroup.Item key={i} action href={"#Link"}>
{item.first_name} {item.last_name}
</ListGroup.Item>
))}
</ListGroup>
</Col>
<Col sm={8}>
<Tab.Content>
{data.map((item: any, i) => (
<Tab.Pane key={i} eventKey={"#Link"}>
{item.company_name} {item.id}
</Tab.Pane>
))}
</Tab.Content>
On every iteration, the href and eventKey stay as "#Link", but I need each iteration to change the eventKey and href so that only one tabbed can be clicked at a time...
I figured it out. Instead of using an href={} in the ListGroup.Item component, I used the eventKey={} prop in both the ListGroup.Item and Tab.Content component and set the prop to eventKey={i} to keep them unique. The indicator was in the React-Bootstrap documentation it said: eventKey => Similar to React's key prop, in that it only needs to be unique amongst the Components siblings.
<ListGroup>
{data.map((item: any, i) => (
<ListGroup.Item key={i} action eventKey={i}>
{item.first_name} {item.last_name}
</ListGroup.Item>
))}
</ListGroup>
</Col>
<Col sm={8}>
<Tab.Content>
{data.map((item: any, i) => (
<Tab.Pane key={i} eventKey={i}>
{item.company_name} {item.id}
</Tab.Pane>
))}
</Tab.Content>
so i have divs created in react basically they are components and i want to style them using bootstrap like this:
div div div
div div
div div
so basically there are 5components,the top 3 should be small and stack next to each others with small margin. the middle two are bigger and they are under the right and left divs and the bottom ones the same as the middle divs.
i have tried doing like col-6 for the middle and col-4 for the top ones but they were all over the place and messy.
this is what i tried without using css just bootstrap:
<div className="container">
<div className="row">
<div className="col-lg-4">
<Card />
<ActualLineChart data={systolic}/>
<ActualLineChart data={Diastolic}/>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div>
<ActualBarChart data={systolicAndDiastolicAndPulseAverageNew}/>
</div>
<ActualScatterChart data={systolicAndDiastolicAndPulseAverageNew}/>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<DistributionChart/>
<DistributionChart />
</div>
</div>
</div>
how can i do this behavior?
I am guessing that if you are using react-bootstrap you probably have already installed it and included react component in your app.js file using this
import { Container, Row, Col } from 'React-Bootstrap';
Then you can simply use this for your desired output.
<Container>
<Row>
<Col xs="4">
component 1
</Col>
<Col xs="4">
component 2
</Col>
<Col xs="4">
component 3
</Col>
</Row>
<Row className="justify-content-between">
<Col xs="4">
component 4
</Col>
<Col xs="4">
component 5
</Col>
</Row>
<Row className="justify-content-between">
<Col xs="4">
component 6
</Col>
<Col xs="4">
component 7
</Col>
</Row>
</Container>
Output will be look like this:
React bootstrap Tabs allow us to create tabs.
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
<Tab eventKey="home" title="Home">
<Sonnet />
</Tab>
<Tab eventKey="profile" title="Profile">
<Sonnet />
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
<Sonnet />
</Tab>
</Tabs>
For each Tab there is a title tag that accepts a string. I wonder if it is possible to display a picture instead of the title? Or display both? Also, I wish I could display a picture next to the Tab's title.
see the first tab, you have a title and an image one next to each other.
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first">
Tab 1
<img src="https://lh3.googleusercontent.com/-pxzt5JSmq3o/AAAAAAAAAAI/AAAAAAAAARw/oSQ00wYMa9g/photo.jpg?sz=32"></img>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Tab 2</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="first">
<Sonnet />
</Tab.Pane>
<Tab.Pane eventKey="second">
<Sonnet />
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
i have to create an autocomplete react component. Initially there must be 5 autocomplete fields. I set a state as an array of 5 input elements like
this.state {activities : ['','','','','']}
i apply a map function over these to display 5 autocomplete boxes.
I have a list of values to be listed as options of autocomplete.
Row>
{this.state.activities.map((newrow,index)=>{
return (
<Col md={12}>
<Row className="form-row">
<Col md={11} sm={10} xs={9}>
<div className="form-input">
<AutoComplete
className="autosearch"
dataSource={options}
onSelect={this.onSelect.bind(this, index)}
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />
</div>
</Col>
<Col md={1} sm={2} xs={3}>
<Button className="delete-row" onClick={this.deleterow.bind(this,index)}><i className="fa fa-trash"></i></Button>
</Col>
</Row>
</Col>)
})
}
</Row>
now i have to create an autocomplete which also has the option to allow me add an option if it is not present in the list .
please help me out. i am new to react and thanks in advance.
This is the website i referred for the autocomplete boxenter link description here
and i referred the basic example code of it