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
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?
enter image description here
import React from 'react'
import pic from './pic2.png'
const Header = () => {
return (
<div className="container-fluid">
<div className="row text-center align-items-center ">
<div className="bg col-md-6 ">
<div style={{ backgroundImage: `url(/pic.jpg)` }}>
</div>
</div>
<div className=" col-6">
<h1>Login</h1>
<form className='loginf'>
<label className='pt-4'> Username </label> <br></br>
<input type='text'className='form-rounded p-1' placeholder=' username'/>
<br></br> <br></br>
<label> Password </label> <br></br>
<input type='password' className='form-rounded p-1' placeholder=' password'/>
</form>
<br></br>
<button className='btn btn-basic form-rounded2'>Login </button>
</div>
</div>
</div>
)
}
export default Header
You have imported a picture, so u can try use object {pic}, not a link to picture
Instead <div style={{ backgroundImage: url(/pic.jpg) }}>
Try: <div style={{ backgroundImage: ``url(${pic})` }}>
Similar issue: Setting a backgroundImage With React Inline Styles
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/
I am working on a React project, In that I have one parent component that is Studentslist.js
in that component I have two buttons, one is Marketing button and another one is Computers button.
And I have one Card component that is Child for Studentslist.js.
Now first I have to hide Card component, I only want to show Card component when I click the Computers button.
I know how to do this by using Class based components but I am trying to do by using Function components.
This is Studentslist.js
import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';
function Studentslist() {
const [hide, show] = useState({})
return(
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className='Departments'>
<button className='btn btn-primary'>Marketing</button>
<button className='btn btn-primary ml-2'>Computers</button>
</div>
<Card></Card>
</div>
</div>
</div>
)
}
export default Studentslist
This is Card.js
import React from 'react';
import './Card.css';
function Card() {
return (
<div className='container'>
<div className='row justify-content-center'>
<div className='col-6'>
<div className='Registration'>
<form>
<div className="form-group">
<label htmlFor="firstname">Firstname</label>
<input type="text" className="form-control" id="firstname"></input>
</div>
<div className="form-group">
<label htmlFor="lastname">Lastname</label>
<input type="text" className="form-control" id="lastname"></input>
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input type="email" className="form-control" id="email"></input>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" className="form-control" id="password"></input>
</div>
<div className="form-group">
<label htmlFor="qualification">Qualification</label>
<input type="text" className="form-control" id="qualification"></input>
</div>
<div className="form-group">
<label htmlFor="branch">Branch</label>
<input type="text" className="form-control" id="branch"></input>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
<button className='cancel btn btn-danger ml-2'>Cancel</button>
</form>
</div>
</div>
</div>
</div>
)
}
export default Card
If you feel I am not clear with my doubt, please put a comment.
This should work now.
import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';
function Studentslist() {
const [show, setShow] = useState(false);
return(
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className='Departments'>
<button className='btn btn-primary'>Marketing</button>
<button onClick={ () => setShow(!show)} className='btn btn-primary ml-2'>Computers</button>
</div>
{show && <Card></Card>}
</div>
</div>
</div>
)
}
export default Studentslist
function Studentslist() {
const [showCard, setShowCard] = useState(false);
return(
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className='Departments'>
<button onClick = {() => setShowCard(true)} className='btn btn-primary'>Marketing</button>
<button className='btn btn-primary ml-2'>Computers</button>
</div>
{showCard && <Card></Card>}
</div>
</div>
</div>
)
}
export default Studentslist
This is how you can set up a toggle on the button.
const [toggle, setToggle] = useState(false)
<button className='btn btn-primary ml-2' onClick={() => setToggle(!toggle)>Computers</button>
{toggle && <Card></Card>}
I have a react component in which a user can add teams and then players to these teams. I use react fetch for posting and getting the data from the database. My question is, how can I automatically update the component to show the newly added teams by the user? Currently I have to manually refresh to see changes.
Do I have to add another function to the button onClick to refresh the whole page or is there a better method in react to just refresh the component?
My render looks like this:
render() {
return (
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron text-center">
<form>
<label for="teamName">Team name</label>
<input type="text" class="form-control" id="teamName"></input>
<button type="submit" onClick={this.addTeams} class="btn btn-primary">Submit</button>
</form>
<br></br>
Registered teams:
<br></br>
{
this.state.data.map((dynamicData, key) =>
<div class="black" id="panels">
<PanelGroup accordion id="accordion"
activeKey={this.state.activeKey}
onSelect={this.handleSelect}>
<Panel bsStyle="primary" eventKey={dynamicData.id}>
<Panel.Heading>
<Panel.Title toggle onClick={() => this.showPlayers(key)}>{dynamicData.name} <i class="fas fa-angle-down"></i></Panel.Title>
</Panel.Heading>
<Panel.Body collapsible>Add players</Panel.Body>
<Panel.Body collapsible>
<div id="dynamicInput">
<input type="text" class="bottomroom" placeholder="Player name" id={"playerName"+key}></input>
<input type="text" class="bottomroom" placeholder="Player number" id={"pnr"+key}></input>
<input type="hidden" class="bottomroom" id={"teamId"+key} value={dynamicData.id}></input>
{this.state.players.map((playersData, key) =>
<p>{playersData.name}</p>
)}
</div>
<br></br>
<button type="submit" onClick={() => this.addPlayers(key)} class="btn btn-success button"><i class="fas fa-check-circle"></i></button>
</Panel.Body>
</Panel>
</PanelGroup>
</div>
)
}
</div>
</div>
</div>
</div>
);
}