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>
Related
I'm fairly new to React so please bare with me.
We have a list of elements which all load their own content based on a query string parameter (let's call it CustomerID) passed in to the page. When clicking on the tabs, the URL remains the same. Let's say the URL is /customer/customerid
Within one of the tabs, the user has an opportunity to click on other items relevant to this Customer, which in turn changes the URL and another id is passed into the query string, let's call it OrderID and the URL is /customer/order/orderid.
When viewing the order, I would like the customer Tab menu to still appear, but I'm not sure the best way to handle this. Should I abandon tabs, and just create some normal links that look and feel like tabs? Or should I make the menu a class that is imported into each page, passing in the CustomerID from the relevant payloads each page contains?
EDIT: to include some code as a reference:
<Formik
initialValues={customer}
enableReinitialize={true}
validationSchema={validationSchema}
onSubmit={handleFormSubmit}>
{({ isSubmitting, values }) => (
<FormikForm autoComplete="off">
<AppCard>
<Tabs defaultActiveKey="details">
<Tab eventKey="details" title="Details">
<Row>
<Col md>
<InputText name="firstName" label="First Name" />
</Col>
<Col md>
<InputText name="lastName" label="Last Name" />
</Col>
</Row>
</Tab>
<Tab eventKey="orders" title="Orders">
<CustomerOrders
onCustomerOrderClick={onCustomerOrderClick}
customerId={customer.customerId}/>
</Tab>
</Tabs>
</AppCard>
</FormikForm>
)}
</Formik>
function onCustomerOrderClick(orderId: any){
history.push(`/customer/order/edit/${orderId}`);
}
The CustomerOrders class contains links to each individual order... Something like the following:
<Row>
<Col className="DataRowFunctions" md="2">
<Link
to={onCustomerOrderClick}
onClick={(e) => {
e.preventDefault();
onCustomerOrderClick();
}}
>
Edit
</Link>
</Col>
</Row>
Opening the order is then changing the URL, which leads me back to my question.
I am trying to hide few columns on mobile screens but its not working for some reason. Here's my code:
<Row>
<Col className="col-md-2">Route Image</Col>
<Col className="col-md-3">
<Row>
<Col>Route Name</Col>
</Row>
<Row>
<Col>Route Location</Col>
</Row>
</Col>
<Col className="col-md-3 hidden-xs-down">Route Difficulty</Col>
<Col className="col-md-2 hidden-xs-down">Route Length</Col>
<Col className="col-md-2 hidden-xs-down">View Details</Col>
</Row>
Can someone please tell me what I am doing wrong?
Since Bootstrap v4.x, all .hidden- classes have been removed. You should use d-none .d-sm-block instead if you want to hide your element only on xs
I am creating a React form where user can upload an image. I am using a function createObjectURL() as given below which i set as the state.
This is the image component
<Row className="form-row">
<Col md={8} className="image-field">
<div className="input-image-file">
<img src={this.state.image} className="myimage" alt="choose an image"></img>
</div>
</Col>
<Col md={4} className="image-buttons">
<Row className="form-row">
<FormControl type="file" onChange={this.onImageChange.bind(this)} ></FormControl>
</Row>
<Row className="form-row">
<Button className="delete-image" onClick={this.deleteImage.bind(this)}><i className="fa fa-trash"></i> Delete</Button>
</Row>
</Col>
</Row>
this is the onImageChange and deleteImage function
onImageChange(event){
this.setState({image: URL.createObjectURL(event.target.files[0])},()=>{
console.log(this.state.image)
})
}
deleteImage(){
this.setState({image : null})
}
the URL is like
"blob:http://localhost:3000/e5531071-c8fc-46db-a934-98678c1cec3a"
I send this data to backend and create an entry in mongodb also where is the URL is saved correctly. I have an option called edit which retrieves all the contents of the form for the user to edit. All contents are getting displayed except the Image.
I get an error like
GET blob:http://localhost:3000/e5531071-c8fc-46db-a934-98678c1cec3a 404 (Not Found)
please do help me thanks in advance this is the console error log
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
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?