Develop Reference

Send selected text to another div in react JS using onSelect event?

I have a two div I want to send selected text to another div using onSelect event? Right now entire para sending to another div but I want to send just selected text. How can I do this?
Demo:- https://codesandbox.io/s/selected-text-send-to-another-div-using-onselect-0ccnrn?file=/src/App.js
My Code:-
import React from "react";
import { Box, Grid, TextField, Typography } from "#material-ui/core";
import { useState } from "react";
const SendSelectedText = () => {
const [label1, setlabel1]=useState('');
const [para, setPara]=useState('This is Old Para');
const handleClick = () => {
setlabel1(para);
};
return (
<>
<Box className="sendSelectedTextPage">
<Grid container spacing={3}>
<Grid item xl={6} lg={6} md={6}>
<textarea onSelect={handleClick}>{para}</textarea>
</Grid>
<Grid item xl={6} lg={6} md={6}>
<TextField
variant="outlined"
size="small"
label="Label One"
value={label1}
multiline
rows={3}
className="sendSelectedTextPageInput"
/>
</Grid>
</Grid>
</Box>
</>
);
};
export default SendSelectedText;
Thanks for your support!

All you need is use window.getSelection().
Here is solution
import React from "react";
import { Box, Grid, TextField, Typography } from "#material-ui/core";
import { useState } from "react";
const SendSelectedText = () => {
const [label1, setlabel1] = useState("");
const [para, setPara] = useState("This is Old Para");
const handleMouseUp = () => {
setlabel1(window.getSelection().toString()); // setting up label1 value
};
return (
<>
<Box className="sendSelectedTextPage">
<Grid container spacing={3}>
<Grid item xl={6} lg={6} md={6}>
// changed event to onMouseUp
<textarea onMouseUp={handleMouseUp}>{para}</textarea>
</Grid>
<Grid item xl={6} lg={6} md={6}>
<TextField
variant="outlined"
size="small"
label="Label One"
value={label1}
multiline
rows={3}
className="sendSelectedTextPageInput"
/>
</Grid>
</Grid>
</Box>
</>
);
};
export default SendSelectedText;
Sandboxlink

You have to use the selection
const handleClick = (e) => {
setlabel1(
e.target.value.substring(e.target.selectionStart, e.target.selectionEnd)
);
};
or
const handleClick = (e) => {
setlabel1(
para.substring(e.target.selectionStart, e.target.selectionEnd)
);
};
Based on this
sandbox

react axios post method

I am getting an error while calling Axios, in React through handle click button and I have created an onlick function. I am getting errors on the last closing bracket.
the errors shows
Line 24:2: Parsing error: Unexpected token, expected "," (24:2)
enter image description here
as a beginner i can't understand what is the problem
please look at the code and tell me what is the problem with handleProducts function
const NewProduct = (props) => {
const [carCompany, setcarCompany] = React.useState([]);
const [carName, setcarName] = React.useState([]);
const [carModel, setcarModel] = React.useState([]);
const [carPrice, setcarPrice] = React.useState([]);
const [Features, setFeatures] = React.useState([]);
const handleProducts = () => {
axios
.post("http://localhost:4000/products/create", {
carCompany,
carName,
carModel,
carPrice,
Features,
}
.then(res=>{console.log(res.data);
})
.catch(error => {
console.error(error);
});
};
return (
<Grid container spacing={3}>
<Grid item xs={12}>
<h1>Enter Car details for Sale</h1>
</Grid>
<Grid item xs={3}></Grid>
<Grid item xs={6}>
<TextField
id="filled-basic"
fullWidth
label="Car Company"
variant="filled"
value={carCompany}
onChange={(e) => setcarCompany(e.target.value)}
/>
<TextField
id="filled-basic"
fullWidth
label="Car Name"
variant="filled"
value={carName}
onChange={(e) => setcarName(e.target.value)}
/>
<TextField
id="filled-basic"
fullWidth
label="Model"
variant="filled"
value={carModel}
onChange={(e) => setcarModel(e.target.value)}
/>
<TextField
id="filled-basic"
fullWidth
label="Price"
variant="filled"
value={carPrice}
onChange={(e) => setcarPrice(e.target.value)}
/>
<TextField
id="filled-basic"
fullWidth
label="Features"
variant="filled"
value={Features}
onChange={(e) => setFeatures(e.target.value)}
/>
</Grid>
<Grid item xs={3}></Grid>
<Grid item xs={3}></Grid>
<Grid item xs={9}>
<Button color="primary" variant="contained" onClick={handleProducts}>
Add Details
</Button>
</Grid>
<Grid>
{carCompany}
{carName}
{carModel}
{carPrice}
{Features}
</Grid>
</Grid>
);
};
export default NewProduct;

You missed a bracket that should close the post method call. I suggest you use consistent indentation so you can see this more clearly in the future. It is up to you how to indent the code - you can put the function call, then and catch in the same column, or you can organize it in any other way that is clearer for you.
Here's the fixed code for handleProducts:
const handleProducts = () => {
axios.post("http://localhost:4000/products/create", {
carCompany,
carName,
carModel,
carPrice,
Features,
}).then(res => {
console.log(res.data);
}).catch(error => {
console.error(error);
});
};

Material-UI TextField loses focus on every onChange

I am creating the following component:
It will contain an array of objects, where each object is a prescription, with the medicine name from the select and a TextField for the Dosis.
My problem is that the TextField loses focus on every onChange() and is very frustrating because it cannot be edited on a single focus.
This is my component :
const MedicineSelect = ({ medications, setMedications, ...props }) => {
const { medicines } = useMedicines()
const classes = useStyles()
const handleChange = (index, target) => {
// setAge(event.target.value)
const newMedications = cloneDeep(medications)
newMedications[index][target.name] = target.value
setMedications(newMedications)
}
const handleAddMedicine = () => {
const newMedications = cloneDeep(medications)
newMedications.push({ medicine: '', dosis: '', time: '' })
setMedications(newMedications)
}
const handleDeleteMedicine = (index) => {
console.log('DELETE: ', index)
const newMedications = cloneDeep(medications)
newMedications.splice(index, 1)
setMedications(newMedications)
}
return (
<Paper style={{ padding: 5 }}>
<List>
{medications.map((medication, index) => (
<ListItem key={nanoid()} divider alignItems='center'>
<ListItemIcon>
<Tooltip title='Eliminar'>
<IconButton
className={classes.iconButton}
onClick={() => handleDeleteMedicine(index)}
>
<HighlightOffOutlinedIcon />
</IconButton>
</Tooltip>
</ListItemIcon>
<FormControl className={classes.formControl}>
<InputLabel
id={`${index}-select-${medication}-label`}
>
Medicamento
</InputLabel>
<Select
labelId={`${index}-select-${medication}-label`}
id={`${index}-select-${medication}`}
name='medicine'
value={medication.medicine}
onChange={(event) =>
handleChange(index, event.target)
}
>
{medicines.map((medicine) => (
<MenuItem
key={nanoid()}
value={medicine.name}
>
{medicine.name}
</MenuItem>
))}
</Select>
</FormControl>
<TextField
// fullWidth
id={`${index}-text-${medication}`}
label='Dosis'
name='dosis'
onChange={(event) =>
handleChange(index, event.target)
}
value={medication.dosis}
/>
</ListItem>
))}
<Button onClick={handleAddMedicine}>+ agregar</Button>
</List>
</Paper>
)
}
And here is where I set the component:
const [medications, setMedications] = useState([
{ medicine: '', dosis: '', time: '' },
])
...
<Grid item md={12} xs={12}>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content'
id='panel1a-header'
>
<Typography variant='h4'>
Tratamiento:
</Typography>
</AccordionSummary>
<AccordionDetails>
<Container disableGutters>
<MedicineSelect
medications={medications}
setMedications={setMedications}
/>
</Container>
</AccordionDetails>
</Accordion>
</Grid>
...
Adding and removing objects from the array works perfect. selecting the medicine from the select, also works perfect. the only problem I have is when editing the Dosis TextField, with every character, the focus is lost and I have to click again on the TextField.
Please help me getting this fixed!!!

After searching a lot, finally I found the solution. Actually when using nanoid() to create unique keys, on every state update React re-renders all components and since the id of both the List and the TextField component are regenerated by nanoid on every render, React loses track of the original values, that is why Focus was lost.
What I did was keeping the keys unmuttable:
<ListItem key={`medication-${index}`} divider alignItems='center'>
and
<TextField
key={`dosis-${index}`}
fullWidth
// id={`${index}-dosis-${medication}`}
label='Dosis'
name='dosis'
onChange={(event) =>
handleChange(index, event.target)
}
value={medication.dosis}
/>

Unable to get the input from a textfield in React

I'm trying to get the input from a text-field in react but it just doesn't work and I have no clue why. I have looked at a lot of different solutions but none of them seem to work.
I even tried to follow this https://reactjs.org/docs/refs-and-the-dom.html but I'm not understanding this correctly?
class Activity extends Component {
constructor(props) {
super(props);
this.newActivity = React.createRef();
}
callAPI() {
fetch("http://localhost:5000/activities", {
method: 'POST',
body: JSON.stringify({
newName: this.newActivity.current,
oldName: this.state.activity
}),
})
.then(function (response) {
return response.json()
});
}
state = {
activity: this.props.data.name
}
render() {
return (
<React.Fragment>
<Grid justify="center" container spacing={(2, 10)} aligncontent="center">
<Grid item xs={8} >
<Paper>
{/*Trying to get the input here so that I can put it into my POST request*/}
<TextField inputRef={el => this.newActivity = el} type="activity" id="standard-basic" label="Standard" defaultValue={this.state.activity} />
</Paper>
</Grid>
<Grid item xs={2}>
<Button onClick={this.callAPI} variant="contained" startIcon={<UpdateIcon />} style={buttonStyle} >Uppdatera</Button>
</Grid>
<Grid item xs={2}>
<Button variant="contained" startIcon={<DeleteIcon />} style={buttonStyle} >Ta Bort</Button>
</Grid>
</Grid>
</React.Fragment>
);
}
}
The error I get is
TypeError: Cannot read property 'newActivity' of undefined

You must initiate state values inside the constructor.
Also change this line as inputRef={this.newActivity} instead of inputRef={(el)=>this.newActivity =el}. Because you already create ref using createRef no need to create again.
class Activity extends Component {
constructor(props) {
super(props);
this.state = {
activity: this.props.data.name
}
this.callAPI = this.callAPI.bind(this);
this.newActivity = React.createRef();
}
callAPI() {
fetch("http://localhost:5000/activities", {
method: 'POST',
body: JSON.stringify({
newName: this.newActivity.current,
oldName: this.state.activity
}),
})
.then(function (response) {
return response.json()
});
}
render() {
return (
<React.Fragment>
<Grid justify="center" container spacing={(2, 10)} aligncontent="center">
<Grid item xs={8} >
<Paper>
{/*Trying to get the input here so that I can put it into my POST request*/}
<TextField inputRef={this.newActivity} type="activity" id="standard-basic" label="Standard" defaultValue={this.state.activity} />
</Paper>
</Grid>
<Grid item xs={2}>
<Button onClick={this.callAPI} variant="contained" startIcon={<UpdateIcon />} style={buttonStyle} >Uppdatera</Button>
</Grid>
<Grid item xs={2}>
<Button variant="contained" startIcon={<DeleteIcon />} style={buttonStyle} >Ta Bort</Button>
</Grid>
</Grid>
</React.Fragment>
);
}

TextField is a wrapper component.
You can pass the ref to the native input like this:
import React, { Component, createRef } from 'react';
import TextField from '#material-ui/core/TextField';
export default class App extends Component {
ref = createRef();
render() {
return (
<div className="App">
<TextField inputProps={{ ref: this.ref }} />
</div>
);
}
}

React hook console.log and interface

Before I ask my question: Yes I did read every other article about this but im basicly just stuck and can't figure out how to fix this.
So basically my rendering and console.log are one step behind my useState changes. The biggest problem visually and functionally is the dynamic button which doesn't enable/disable correctly. My code is:
import React, { useState, useEffect } from 'react';
import ApiCalls from "../../classes/apiCallsClass"
import useStyles from "./styles";
import { TextField, Select, Paper, Grid, MenuItem, Button } from '#material-ui/core';
import { withStyles } from "#material-ui/styles";
export default function TicketCreation() {
const [buttonDisabled, setButtonDisabled] = useState(true);
const [, setTick] = useState(0);
const classes = useStyles();
const [ticketname, setTicketName] = useState('');
const [description, setDescription] = useState('');
const [prio, setPrio] = useState('');
const [system, setSystem] = useState('');
const handleChangePrio = event => {
setPrio(event.target.value);
checkFormFilled();
};
const handleChangeDescription = event => {
setDescription(event.target.value);
checkFormFilled();
};
const handleChangeName = event => {
setTicketName(event.target.value);
checkFormFilled();
};
const handleChangeSystem = event => {
setSystem(event.target.value);
checkFormFilled();
};
const checkFormFilled = () => {
if (ticketname && description && prio && system) {
setButtonDisabled(false, function(){
setTick(tick => tick + 1);
});
} else{
setButtonDisabled(true, function(){
setTick(tick => tick + 1);
});
}
}
const handelButtonSubmit = event => {
if (ApiCalls.createTicket(ticketname, system, prio, description)) {
console.log("Created");
}
}
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={4}>
<Paper className={classes.paper}>
<TextField id="standard-basic" value={ticketname} onChange={handleChangeName} label="Ticketname" fullWidth />
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<Select value={system} onChange={handleChangeSystem} displayEmpty fullWidth className={classes.selectEmpty}>
<MenuItem value="" disabled>
System
</MenuItem>
<MenuItem value={1}>Radar</MenuItem>
<MenuItem value={2}>Missles</MenuItem>
<MenuItem value={3}>Toilet</MenuItem>
</Select>
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<Select value={prio} onChange={handleChangePrio} displayEmpty fullWidth className={classes.selectEmpty}>
<MenuItem value="" disabled>
Priority
</MenuItem>
<MenuItem value={1}>Low</MenuItem>
<MenuItem value={2}>Medium</MenuItem>
<MenuItem value={3}>High</MenuItem>
</Select>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>
<TextField
value={description}
onChange={handleChangeDescription}
id="outlined-multiline-static"
label="Ticket description"
multiline
rows="4"
variant="outlined"
fullWidth />
</Paper>
</Grid>
<Grid item xs={12}>
<Button disabled={buttonDisabled} onClick={handelButtonSubmit} variant="contained" color="primary">
Create
</Button>
</Grid>
</Grid>
</div>
);
}
Don't mind the setTick usestate, I tried this in combination with a callback to fix the issue but it wasn't working.
My question basically is:
What do I need to do to enable my button instantly without delay? (and maybe other things I do wrong? first time using react hooks)

State setters (setSystem, etc.) are asynchronous. That means where you're doing things like setSystem(event.target.value); checkFormFilled() -- the new value of system, in this case, may not be updated by the time checkFormFilled runs. That's likely why you're seeing things "lag behind" the values.
What you should be doing is not calling checkFormFilled directly after your set state calls; instead, put checkFormFilled in a useEffect hook that depends on the form elements. That way, React will call your checkFormFilled function when any of those values are actually updated.
useEffect(() => {
checkFormFilled();
}, [ticketname, description, prio, system]);
Then your change handlers only need to worry about setting the values, not calling the form filled check, and everything is guaranteed to be up to date.