I need to activate enter button after captcha verified but currently it's not working. It shows anchor:1 Uncaught (in promise) null below is my whole code. I'm using https://www.npmjs.com/package/react-google-recaptcha
enterkey = event => {
console.log(event)
if (event.key === "Enter") {
this.submitHandler(event);
}
};
captchaValidate = (value) => {
this.enterkey();
console.log(value)
if (value) {
this.setState({ disabled: false })
} else {
this.setState({ disabled: true })
}
}
<ReCAPTCHA
sitekey={captcha_key}
onChange={this.captchaValidate}
className="g_capctha"
/>
I think problem is with event because event is getting undefined when captchaValidate called. How can I get event in this captchaValidate because changing value to event it gives only some text similar like any token. Please help.
you can make it works by making an async promise-based value fetching.
captchaValidate = async (value) => {
this.enterkey();
console.log(value)
if (value) {
this.setState({ disabled: false })
} else {
this.setState({ disabled: true })
}
}
Related
for (const localTrack of localTracks) {
if (localTrack.kind === 'video') {
localParticipant.publishTrack(localTrack, {
priority: 'low',
});
} else {
localParticipant.publishTrack(localTrack, {
priority: 'standard',
});
}
}
I am currently getting an error:
TwilioError: Track name is duplicated
This is because this method is called multiple times (each time a new permission is approved) with the list of all approved tracks.
How do I check if a particular track has been already published?
One would expect that we can inspect the localParticipant object, e.g.
console.log(
'>>>',
localParticipant.tracks.size,
localParticipant.audioTracks.size,
localParticipant.videoTracks.size
);
but the above produces >>> 0 0 0 and then is followed by "Track name is duplicated" error. So there is some race-condition error.
This was indeed a race condition, and to understand how we got there, we need the full code example:
useEffect(() => {
if (!localParticipant) {
return;
}
for (const localTrack of localTracks) {
if (localTrack.kind === 'video') {
localParticipant.publishTrack(localTrack, {
priority: 'low',
});
} else {
localParticipant.publishTrack(localTrack, {
priority: 'standard',
});
}
}
return () => {
localParticipant.audioTracks.forEach((publication) => {
publication.unpublish();
});
localParticipant.videoTracks.forEach((publication) => {
publication.unpublish();
});
};
}, [localParticipant, localTracks]);
What is happening here is that every time localParticipant or localTracks change, we do two things:
We clean-up by unsetting any existing audio/ video tracks
We bind new tracks
Somehow the clean up logic causes the localParticipant.publishTrack method to go into an error state ("Track name is duplicated") publishTrack is invoked just after unpublish.
The fix is to simply move unpublish logic into a separate hook that does not depend on localTracks.
useEffect(() => {
if (!localParticipant) {
return;
}
return () => {
localParticipant.audioTracks.forEach((publication) => {
publication.unpublish();
});
localParticipant.videoTracks.forEach((publication) => {
publication.unpublish();
});
};
}, [localParticipant]);
useEffect(() => {
if (!localParticipant) {
return;
}
for (const localTrack of localTracks) {
if (localTrack.kind === 'video') {
localParticipant.publishTrack(localTrack, {
priority: 'low',
});
} else {
localParticipant.publishTrack(localTrack, {
priority: 'standard',
});
}
}
}, [localParticipant, localTracks]);
Note that you need to do this in addition for handling events. The unmount clean-up strategy is used here primarily to enable react hot reloading.
I am trying to write a react code to submit the value to the backend server.
I want the input field to be cleared out as soon as the user hits submit button.
I have written the below code, could anyone help me with what I am missing here?
class Create extends Component {
state = {
task : {
title: '',
completed: false
}
}
CreateHandler = (event) => {
this.setState((state) => {
return {
task: {
...state, title: '' // <----- CLEARING HERE (well, trying)
}
}
});
event.target.value=""; // <----- ALSO HERE
event.preventDefault();
axios({
method:'post',
url:'http://localhost:8000/api/task-create',
data: this.state.task,
xsrfHeaderName: this.props.CSRFToken
})
.then((res) => {
console.log(res.data);
})
this.props.updateState(this.state.task)
}
ChangeHandler = (event) => {
this.setState(state => {
return {
task: {
...state, title: event.target.value
}
}
})
}
Breaking the code in parts so that it's easily readable.
render() {
return (
<form onSubmit={this.CreateHandler.bind(this)}>
<div className="header form-group">
<input
className="newItem form-control"
onChange={this.ChangeHandler.bind(this)}
value={this.state.task.title}
/>
<button
type="submit"
class="saveButton btn btn-primary btn-warning">
submit
</button>
</div>
</form>
)
}
}
export default Create;
The end goal is to clear the input field and then send the data to the backend django server, which is being done successfully except the input field being cleared.
You are not updating state correctly
this.setState((state) => {
return {
task: {
...state, title: '' // <----- CLEARING HERE (well, trying)
}
}
});
should be
this.setState((state) =>({...state, task: {...state.task, title: ''}}))
In your case, it could be done like this:
this.setState(previousState => ({
task: {
...previousState.task,
title: '' // <----- CLEARING HERE
}
}));
A better way to write your createHandler method:
CreateHandler = (event) => {
// Prevent the default form action
event.preventDefault();
// Call your API
axios({
method: "post",
url: "http://localhost:8000/api/task-create",
data: this.state.task,
xsrfHeaderName: this.props.CSRFToken,
}).then((res) => {
// Request passed
// Call your prop function
this.props.updateState(this.state.task);
// Clear the unnecessary data
this.setState((prevState) => ({
// Create new object
task: {
// Assign the properties of previous task object
...prevState.task,
// Clear the title field
title: "",
},
}));
});
};
Hope this helps!
I am trying to be able to read a value that is boolean to see if a user did a specific action or not and I am using the ReactJS functional component style. I am trying to read the runValue in my code to see if the run() method changed the value and I want to be able to read this value without recalling the function.
I want to be able to put in my useEffect method this line of code;
Run.RunFunction().run((index) => {
if (index) {
\\\ do stuff here if index is true
} else {
///if index is false
}
}
my code
const Run = {
RunFunction: () => {
let runValue = false;
return {
run() {
runValue = true
},
listener: function(val) {},
checkStatus: function(listen) {
this.listener = listen
}
}
},
}
Run.RunFunction().checkStatus((index) => {
if (index) {
console.log('running')
} else {
console.log('not running')
}
});
I am having trouble having this code to work and I want to be able to see the value of the runValue initially and if it changes.
Thank you
I'm a facing a bit of a problem here. I'm trying to pass a parameter from a function to this.setState callback, but I can't figure out how is this possible.
My code looks like this:
selectHandler(event){
this.setState({
selectedImage: event.target
}, (event) => {
this.markSelectedHandler(event)
})
}
markSelectedHandler(e){
e.target.classList.add('active')
if(e.target !== this.state.selectedImage && this.state.selectedImage){
this.state.selectedImage.classList.remove('active')
e.target.classList.add('active')
}
}
e.target returns null, any idea why this happens ?
The event will not work async. You will need to extract the values or use e.persist() reactjs.org/docs/events.html#event-pooling
You could however say:
selectHandler(event){
const { target } = event;
this.setState({
selectedImage: target
}, () => {
this.markSelectedHandler(target)
})
}
markSelectedHandler(target){
target.classList.add('active')
if(target!== this.state.selectedImage && this.state.selectedImage){
this.state.selectedImage.classList.remove('active')
target.classList.add('active')
}
}
But I will recommend against it..
To be honest, you should not add your class with DOM manipulating but instead add it in your render <img className={this.state.selectedImage === myImage ? 'active' : undefined} />
You are shadowing your event in this code:
selectHandler(event){
this.setState({
selectedImage: event.target
}, (event) => {
this.markSelectedHandler(event)
})
}
You need not to shadow, by not passing a parameter with the same name (event to the setState callback):
selectHandler(event){
this.setState({
selectedImage: event.target
}, () => {
this.markSelectedHandler(event)
})
}
Try not sending event as an argument to the callback
eg you have written
selectHandler(event){
this.setState({
selectedImage: event.target
}, (event) => {
this.markSelectedHandler(event)
})
}
Write like this instead
selectHandler(event){
this.setState({
selectedImage: event.target
}, () => {
this.markSelectedHandler(event)
})
}
basically, I am validating form fields by checking if they pass my regex, and if they do, I am setting state with either 'success' or 'error' (used by react-bootstrap).
so basically, I have about 6 functions that need to execute, however, the password field validation functions are giving me a lot of trouble.
My handleSubmit() at the moment looks something like this -
handleSubmit() {
this.validate1();
this.validate2();
// ...
this.validatePassword();
this.validateConfirmPassword();
}
However, the issue is that validatePassword() will setState either 'success' or 'error', and since the functions are not firing off in order, I usually get the wrong result for validateConfirmPassword().
I am reading the mozilla page on Promises, but I am really confused and not sure how to apply that in my code.
Could I do something like Promise.all([everything_except_validateConfirmPassword]).then(validateConfirmPassword()) but that doesn't seem right..
validatePassword(pass) {
if (pass.length >= 8) {
if (checkPass.test(pass)) {
this.setState({
passValidation: validation.success
});
} else {
this.setState({
passValidation: validation.error
});
}
} else {
this.setState({
passValidation: validation.error
});
}
}
validateConfirmPassword(pass, confirmPass) {
const matches = pass === confirmPass;
if (matches && this.state.passValidation === validation.success) {
this.setState({
confirmPassValidation: validation.success
});
} else {
this.setState({
confirmPassValidation: validation.error
});
}
}
You can solve this by using React's componentDidUpdate in this way:
componentDidUpdate() {
if (this.state.canCheckConfirmPwd) {
this.validateConfirmPassword();
}
}
validatePassword(pass) {
if (pass.length >= 8) {
if (checkPass.test(pass)) {
this.setState({
passValidation: validation.success,
canCheckConfirmPwd: true, // on next update we'll trigger validateConfirmPassword()
});
} else {
this.setState({
passValidation: validation.error
});
}
} else {
this.setState({
passValidation: validation.error
});
}
}
validateConfirmPassword(pass, confirmPass) {
const matches = pass === confirmPass;
if (matches && this.state.passValidation === validation.success) {
this.setState({
confirmPassValidation: validation.success,
canCheckConfirmPwd: false, // to avoid retriggering the function on next update
});
} else {
this.setState({
confirmPassValidation: validation.error,
canCheckConfirmPwd: false,
});
}
}