I am building a link preview and I want to get the input from a user then display it with MicroLink, the problem that every time i want to get the link i get 'Failed to construct 'URL': Invalid URL'
import Microlink from '#microlink/react'
import React from 'react'
export default class LinkPreviewer extends React.Component {
constructor(props){
super(props)
this.state={
url:'https://www.robinwieruch.de/react-preventdefault'
}
this.handelChange = this.handelChange.bind(this)
}
handelChange(e){
console.log(e)
this.setState({
url:e.target.value
})
}
render() {
return (
<div>
<div>
<input type='text' name='url' value={this.state.url} onChange={this.handelChange}/>
</div>
<div>
</div>
<Microlink
url={this.url}
/>
</div>
);
}
}
this.url doesn't exist, it's this.state.url, so you need to replace your code by this :
<Microlink
url={this.state.url}
/>
Related
I want a comment to be posted one after another but not exactly sure how to implement it. Right now, the new comment is replacing the old one. After reading some posts, I think this.props.children could be the answer but stil somewhat confused, so please let me know the best way to implement what I want to. Thanks.
Comment.js:
import React from 'react';
import { Display } from './Display';
export default class Comment extends React.Component {
constructor(props) {
super(props);
this.state = { buttonClicked: false, count: 0 };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ buttonClicked: true , count : this.state.count + 1 });
console.log('Button clicked');
}
render() {
const comment_form =(
<div className="posts" >
<input type="text" id="comment-box" name="comment" placeholder="Say something nice." />
<button className="submit-button" type="button" onClick={this.handleClick}>Comment</button>
</div>
);
if (this.state.buttonClicked) {
return (
<div>
{comment_form}
<Display commentNumber={this.state.count} />
</div>
);
} else {
return (<div> {comment_form} </div>);
}
}
}
Display.js:
import React from 'react';
import './App.css';
export class Display extends React.Component {
constructor(props){
super(props);
}
render() {
console.log('display rendered');
const comments = (
<div className="display-comments">
<p>Comment {this.props.commentNumber} :{ document.getElementById('comment-box').value }</p>
</div>
);
return (
<div>
{comments}
</div>
);
}
}
Use the map function to dynamically render the elements.
Link: https://reactjs.org/docs/lists-and-keys.html
I'm new to React and i'm trying to pass data (a date - 'dd/mm/yyyy') to a second page from an input box on the home page. I'm confused as to where i put my Link, what information i put in the redirect(if any) and also the syntax to send and receive it on page it. Here is the code i have so far. Please can anybody help?:
class Home extends React.Component {
constructor(props) {
super(props);
this.state = { inputDate: '' };
}
myChangeHandler = (event) => {
this.setState({inputDate: event.target.value});
}
render() {
let dateEntered = this.state.inputDate
return (
<form>
<h3 >Enter Date :
<input
type="text" className="input-text" placeholder={"DD/MM/YYYY"} onChange={this.myChangeHandler}
/>
</h3>
<button className="button half-page-width-button button-blue1"><Link to={{
pathname: '/Page1',
state: [{dateEntered}]
}}>Submit Date</Link>
</button>
</form>
);
}
}
Thanks again
Thank you for getting back to me. My receiving component looks like this. Where would I put the code? In the render section?
import React, {Component} from 'react';
import Home from './components/Home';
import './App.css';
class Page1 extends Component {
render() { // Table Data
return (
<form>
<h3 >Enter Date :
<input
type="text" className="input-text" value={this.state.header}
/>
</h3>
</form>
);
}
}
export default Page1;
You can make use of state to pass on to data to the Link Component and receive it from location in the component rendered at /Page1 path
class Home extends React.Component {
constructor(props) {
super(props);
this.state = { inputDate: '' };
}
myChangeHandler = (event) => {
this.setState({inputDate: event.target.value});
}
render() {
let dateEntered = this.state.inputDate
return (
<form>
<h3 >Enter Date :
<input
type="text" className="input-text" placeholder={"DD/MM/YYYY"} onChange={this.myChangeHandler}
/>
</h3>
<button className="button half-page-width-button button-blue1"><Link to={{
pathname: '/Page1',
state: {dateEntered}
}}>Submit Date</Link>
</button>
</form>
);
}
}
In the receiving component
class Page1 extends Component {
render() { // Table Data
const { dateEntered } = this.props.location.state || {};
return (
<form>
<h3 >Enter Date :
<input
type="text" className="input-text" value={this.state.header}
/>
</h3>
</form>
);
}
}
export default Page1;
When I insert any text in input field, screen disappears, I am new to UI, learning ReactJs, help me out please.
import React from 'react';
class InputChange extends React.Component{
constructor(props){
super(props)
this.state={
input:''
}
}
updateState = (text) => {
this.setState({input: text});
}
render(){
return(
<div>
<div>Input:{this.state.input}</div>
<div>
<input type="text" value={this.state.input} onChange={this.updateState} />
</div>
</div>`
);
}
}
export default InputChange;
It's event.target.value...:
class InputChange extends React.Component {
state = { input: '' };
updateState = event => {
this.setState({ input: event.target.value });
};
render() {
return (
<div>
<div>Input:{this.state.input}</div>
<div>
<input
type="text"
value={this.state.input}
onChange={this.updateState}
/>
</div>
</div>
);
}
}
export default InputChange;
More info in the docs: https://reactjs.org/docs/forms.html
I need some help building a todo list with React. Im a beginner so there are a lot of aspects of react I don't understand. I've created a Todo list at the moment this lists an un ordered list with the input, edit and remove button a select menu and a further input field.
Firstly Im confused to where I update my state. the "App.js" is where my main state is stored and im trying to keep it that way. I need to know how to edit the input field (todo listitem) which stores the new value. Im then looking to create a "completed list" where i want to store the input field as well as the select option (which ever is clicked) Please could someone give me some guidelines for this. Thank you in advance
import React, { Component } from 'react';
import Form from './Components/Form'
import './App.css';
import List from './Components/List'
import Completed from './Components/Completed'
class App extends Component {
constructor(props){
super(props)
this.state={
isEditing:false,
text:"",
items:[],
completed:[
{
}
]
}
this.submit=this.submit.bind(this);
this.eventHandler=this.eventHandler.bind(this)
}
submit=(e)=>{
e.preventDefault();
this.setState({
items:[
{
name:this.state.text,
},
...this.state.items
],
text:""
})
}
remove=(index)=>{
this.setState({
items:this.state.items.filter((_,i) => i!==index)
})
}
onChange=(index)=>{
this.setState({
items:this.state.items.filter((_,i) => i!==index)
});
}
eventHandler=(e)=>{
this.setState ({
text:e.target.value
})
}
handleNameEdits=()=>{
this.setState({
isEditing:true
})
}
edit=()=>{
this.setState({
isEditing:!this.state.isEditing
})
}
myoptions=(e)=>{
this.setState({
completed:[
{
webmaster:e
},
...this.state.completed
]
})
}
render() {
return (
<div className="App">
<header className="App-header">
<Form submit={this.submit} myValue={this.state.text} eventHandler=
{this.eventHandler}/>
{this.state.items.map && this.state.items.map((item,index)=>(
<List key={index}
name={item.name}
edit={this.edit}
change={()=>this.onChange(index)}
remove={()=>this.remove(index) }
handleNameEdits={this.handleNameEdits}
myoptions={(e =>this.myoptions(e.target.value))}
/>
))}
</header>
<div>
completed
</div>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Edit from './Edit';
class List extends Component {
constructor(props) {
super()
this.options = [
{name:'web1'},
{name:'web2'},
{name:'web3'},
{name:'web4'}
];
}
render() {
const {key} = this.props;
const x=this.options;
return (
<ul>
<li>{this.props.name}
<button onClick={this.props.edit}>Edit</button>
<button onClick={this.props.remove}>Remove</button>
<select onChange={this.props.myoptions}>
{this.options.map(options => <option>{options.name}</option> )}
</select>
<label> Completed
</label><input type="checkbox" onChange=
{this.props.change} checked={this.props.change} onClick=
{this.props.submit}/>
<label> Ticket Number </label><input type='text'/>
</li>
</ul>
)
}
}
export default List;
import React from 'react'
import PropTypes from 'prop-types';
const Form= props=> {
return (
<form onSubmit={props.submit}>
<input type='text' value={props.myValue} onChange=
{props.eventHandler}/>
<button> click</button>
</form>
)
}
Form.PropTypes={
onSubmit:PropTypes.func.isRequired,
evenHandler:PropTypes.func.isRequired,
myValue:PropTypes.string.isRequired
}
export default Form
Hello everybody I'm wondering if I can pass a state value from a component to other where I'm returning jsx code to be displayed for example I have 3 components.
1
import React, { Component } from 'react';
import Conteneur from './Conteneur';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
<Conteneur values={this.state.value} />
</form>
);
}
}
export default Header;
2 app.js
import React, { Component } from 'react';
import Header from './Header';
import Conteneur from './Conteneur';
import './App.css';
class App extends Component {
render() {
return (
<div className="App" >
<br />
<Header />
<br />
<Conteneur />
</div>
);
}
}
export default App;
3 and finally
import React, { Component } from 'react';
const Conteneur = () => {
return (
<div className="tab"><span>ok test </span></div>
);
};
export default Conteneur;
I like to pass the state value of header that I have from the input to conteneur and then display in the box while I have some code all the examples that I saw online they are sending state like this:
class Dashboard extends Component {
...
...
render(){
return(
<Sidebar data={this.state.data1}/>
);
}
}
So can I do like this <Conteneur values={this.state.value} /> in the form ?
And I imported Conteneur.
i updated the code but the output is
Yes you can do, only one thing you are missing. Receive the props in the function parameters then render that in the ui.
Like this:
const Conteneur = (props) => {
return (
<div className="tab"><span>value: {props.value} </span></div>
);
};