I've got this component that is throwing me error that I don't recognize:
import React from 'react';
const Search = () => {
return (
<section className='section'>
<div className='container'>
<div className='row'>
<div className='columns'>
<div className='column is-full'>
<h3 id='branding' className='title is-size-3'>search</h3>
<form>
<div className='field'>
<div className='control has-icons-right'>
<input type='text' name='search' className='input is-medium' autofocus='autofocus' required />
<span className='icon is-medium is-right'>
<i className="fas fa-search fa-2x" />
</span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
)
}
export default Search;
As soon as I add file uploading input below the text input like this:
<div className='field'>
<div className='control has-icons-right'>
<input type='text' name='search' className='input is-medium' autofocus='autofocus' required />
<span className='icon is-medium is-right'>
<i className="fas fa-search fa-2x" />
</span>
</div>
<div className='field'>
<input type='file' name='file' value='Photo' />
</div>
</div>
I get error output from Firefox Dev Edition: InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable. The Opera browser throws similar error.
Can I get any feedback as to why React throws this error when including input tag for uploading files ?
screenshot:
Remove value from an input
<input type='file' name='file' />
here is full example working with files
https://www.geeksforgeeks.org/file-uploading-in-react-js/
Related
I am trying to create a bootstrap form and i want to show as a preview in bootstrap card what it will look like
Here is my code for form
<div className="container">
<div className="row">
<div className="col p-5">
<div className="card" style={{ width: "18rem" }}>
<img data-src={img} className="card-img-top" alt="any image"/>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{place}</p>
<p className="card-text">{year}</p>
<a href="#" className="btn btn-primary">
Go somewhere
</a>
</div>
</div>
</div>
<div className="col p-5">
<form type="form">
<div className="form-group">
<label>Title</label>
<input
name="title"
type="text"
className="form-control mt-2"
placeholder="Enter name of car"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div className="form-group">
<label>Place</label>
<input
name="place"
type="text"
className="form-control mt-2"
placeholder="Enter city name"
value={place}
onChange={(e) => setPlace(e.target.value)}
/>
</div>
<div className="form-group">
<label>Year</label>
<input
name="year"
type="number"
className="form-control mt-2"
placeholder="Enter mfg year"
value={year}
onChange={(e) => setYear(e.target.value)}
/>
</div>
<div className="form-group">
<input
className=" mt-2"
type="file"
name="file"
value={img}
onChange={changeHandler}
/>
</div>
{error && <div>{error}</div>}
{file && <div>{file.name}</div>}
<button
onClick={uploadFile}
type="submit"
className="btn btn-primary mt-2"
>
Submit
</button>
</form>
</div>
</div>
</div>
I can preview title as given in input field by passing as value parameter but i don't know how to do it with image. Also i am storing value of title,place etc in variable do i need to do the same for image too?
here is the code of component and i screenshot i have accached the code of index.html which located in public file of react. anyone please help me!! please follow the screenshot. (language used - reactJS, css - tailwind)
<form
name="contact-form"
netlify
netlify-honeypot="bot-field"
hidden
className="flex flex-wrap -m-2"
>
<input type="hidden" name="form-name" value="contact-form" />
<div className="p-2 w-1/2">
<div className="relative">
<input
type="text"
id="name"
name="name"
required
/>
</div>
</div>
<div className="p-2 w-1/2">
<div className="relative">
<input
type="email"
id="email"
name="email"
required
/>
</div>
</div>
<div className="p-2 w-1/2">
<div className="relative">
<input
type="text"
id="trip"
name="trip"
required
/>
</div>
</div>
<div className="p-2 w-1/2">
<div className="relative">
<input
type="number"
id="pax"
name="pax"
required
/>
</div>
</div>
<div className="p-2 w-full">
<BlueButton type="submit">Enquiry Now</BlueButton>
</div>
</form>
public html code
New to react and I am trying to use a colon like so (within the return of ProfilePage.js):
<a class="uk-text">{user.attributes.custom:company_name}</a>
but its giving me this error:
Parsing error: Unexpected token, expected "}"
I am getting attributes from an AWS Cognito User Pool and I can successfully see the returned object if I log it to the console like so:
Object >
custom:company_name: "apple"
custom:department: "dept"
custom:job_title: "title"
email: "email#me.com"
email_verified: false
family_name: "user"
given_name: "test"
locale: "location"
phone_number: "+18702831861"
phone_number_verified: false
sub: "guid"
I can get the family_name without issue:
<a class="uk-text">{user.attributes.family_name}</a>
but anytime I try the custom attributes with its colon, it throws the error.
Full ProfilePage.js code:
import React from "react";
import { API, graphqlOperation } from 'aws-amplify';
class ProfilePage extends React.Component {
state = {
};
componentDidMount() {
if (this.props.user) {
}
}
render() {
const { user } = this.props;
console.log(user.attributes)
const emailVerified = this.props.user.attributes.email_verified
const company_name = user.attributes.custom:company_name; // ERROR occurs here
return (
<>
<div class="container">
<div class="uk-margin-medium-top">
<ul class="uk-flex-center uk-tab">
<li class="uk-active"><a>Profile Summary</a></li>
</ul>
</div>
{/* Cards */}
<div class="uk-section">
<div class="uk-child-width-1-3#m uk-grid-small uk-grid-match uk-grid">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">User</h3>
<p>
{/* Form */}
<form class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">User ID</label>
<div class="uk-form-controls">
<a class="uk-text-muted uk-link-reset">{user.attributes.sub}</a>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">First Name</label>
<div class="uk-form-controls">
<a class="uk-text">{user.attributes.given_name}</a>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Last Name</label>
<div class="uk-form-controls">
<a class="uk-text">{user.attributes.family_name}</a>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Email <a class="uk-label uk-text-link">{emailVerified}</a></label>
<div class="uk-form-controls">
<input class="uk-input" id="form-stacked-text" type="text" placeholder={user.attributes.email} />
</div>
</div>
</form>
</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">Company</h3>
<p>
{/* Form */}
<form class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Name</label>
<div class="uk-form-controls">
<a class="uk-text">{company_name}</a>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Role</label>
<div class="uk-form-controls">
<input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Description</label>
<div class="uk-form-controls">
<input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
</div>
</div>
</form>
</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-body">
<h3 class="uk-card-title">Security</h3>
<p>
{/* Form */}
<form class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Change Password</label>
<div class="uk-form-controls">
<input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Multi-Factor Authenication</label>
<div class="uk-form-controls">
<input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Delete Account</label>
<div class="uk-form-controls">
<button class="uk-button uk-button-primary">Delete Account Forever</button>
</div>
</div>
</form>
</p>
</div>
</div>
</div>
</div>
</div>
</>
)
}
}
export default ProfilePage;
I do not even know what this use is called {user.attributes.custom:company_name}, reference to a const? Can someone educate me on what that is named and how do I use a colon within one?
Regards
You can access object's properties with brackets as well.
<a class="uk-text">{user.attributes["custom:company_name"]}</a>
Since a colon isn't a valid character for variables, object properties (because it's used to set a value to some property), you have to define/get the value with wrapping the name with quotes.
Hope I got the problem correctly.
I'm write application with react, and I have a issue to use the tag input
enter code here:import React, { Component } from 'react'
enter code here :import { Formik } from 'formik';
enter code here:export class Login extends Component {
render() {
return (
<div class="header">
<div class="container">
<div class="logo"></div>
<div class="form">
<form>
<div class="inputemail">
<label class="labelinput" for="">email or phone</label>
<input class="input" type="text">
<div class="inputpassword">
<label class="labelinput" for="">Password</label>
<input class ="input"value type="password">
<a class="linkpassword" href="#">forget password?</a>
<input class="inputbtn" type="submit" value="entrar">enter</input>
</input>
</div>
</input>
</div>
</form>
</div>
</div>
</div>
)
};
}
export default Login;
when the react don't accept the tag input. someone know why this happen?
First of all, you have to use className="" instead of class="".
Second, You have an unclosed input <input class="input" type="text"> You have to close it first.
And the last part is also inappropriate for react.
<input class="inputbtn" type="submit" value="entrar">enter</input>
</input>
Please clean your HTML firstly. All tags have to be closed. Even such as and
If this doesn't solve the problem, please send us your error.
you have a sintax error in your code and your missing closing tags, use this:
render() {
return (
<div class="header">
<div class="container">
<div class="logo" />
<div class="form">
<form>
<div class="inputemail">
<label class="labelinput" for="">
email or phone
</label>
<input class="input" type="text" />
<div class="inputpassword">
<label class="labelinput" for="">
Password
</label>
<input class="input" value type="password" />
<a class="linkpassword" href="#">
forget password?
</a>
<input class="inputbtn" type="submit" value="enter" />
</div>
</div>
</form>
</div>
</div>
</div>
);
}
import React, { Component } from 'react';
class BigText extends Component {
render() {
return (
<div>
<div>
<h1 className="row px-2">Big Text Notification</h1>
<hr />
<div className="row px-1 py-2 animated fadeIn">
<div className="px-1" style={{ width:50 + '%' }}><br />
<div className="mb-1">
<input type="text"
className="form-control"
placeholder="Title"
name="title"
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Text"
name="text"
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Summary"
name="summary"
/>
</div>
<br />
<div className="row px-2" >
<div>
<button className="nav-link btn btn-block btn-info" onClick={this.handleClick} >Save</button>
</div>
<div className="px-1">
<button className="nav-link btn btn-block btn-danger"> Cancel</button>
</div>
</div><br />
</div>
</div>
</div>
</div>
)
}
}
export default BigText;
i had added the code snippet
What I'm doing is I'm trying to add a Mobile frame as component on side of the fields so that whatever i write in the fields will be shown in that mobile being shown as the component on the screen
so i wanted to know how to add that mobile and how to show text in it as well