reactjs – React router automaticaly logs in user

I’m new to react, redux and react-router dom,

My register workflow that user enteres details and then receivie verification code by email. Now I want to when he enteres verification code in app to autommaticlly loged in. I couldnt find wny solution on interenet so I am assking you to help me.

I don’t understand where to put api call when verification code is confirmed. IF I get 200OK I wnat to automatically login user and if not 200OK I want to display error message.

Tahnks in advance

eventos – Ocultar o mostrar un “div o componente” con dos botones en ReactJs

El código funciona hasta el segundo div pero al intentar colocar un tercer div , tiende al error ( Unexpected token, expected “}” ),en la linea 38 ,que solución debería realizar, o que le falta un evento mas ,un hook?
Lo que trato de hacer es realizar un cambio de entre un div y otro con sus respectivas características ,utilizando botones de Atrás y Siguiente, los cuales serán los que controlen esta parte del codigo,iniciando desde el primero y cuando haga clic cambiara al otro div 2 y así de nuevo al tercer div con la posibilidad de regresar al anterior con el botón atrás del div3 al div2 y al div1.

import React, { Component } from "react";
class Ejemplo extends Component {
    constructor() {
        super();
        this.state = { checked: true };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(checked) {
        this.setState({ checked });
    }
    render() {
        return (
            <div>
                <div className="col-md-6  mb-2">
                    <div className="btn-col" role="group" aria-label="Basic example">
                        {/* Este es el boton 1 */}
                        <button id="btn-atras" className="btn" onClick={() => this.handleChange(true)}>
                            Atras
                        </button>

                        {/* Este es el boton 2 */}
                        <button id="btn-siguiente" className="btn" onClick={() => this.handleChange(false)}>
                            Siguiente
                        </button>
                    </div>
                </div>
                <span>
                    {this.state.checked ? (
                        <div /* Este es el div 1 */ className="redcom1" >
                            <h1>Componente 1</h1>
                        </div>
                    ) : (
                        <div /* Este es el div 2 */ className="redcom2" >
                            <h2>Componente 2.2</h2>
                        </div>
                    ) : (
                        <div /* Este es el div 3 */ className="redcom3" >
                            <h3>Componente 3.3.3</h3>
                        </div>
                    )}
                </span>
            </div>
        );
    }
}
export default Ejemplo;

reactjs – Como actualizar un conjunto de componentes por otro en React? sin Router

Lo que trato de hacer es que el componente mediante un boton se actualiza y cambio a otro y asi sucesivamente (pienso en crear 5 asi como la imagenes),pero no he podido ver algun ejemplo de como poder replicar,tengo por entendido que podria juntarlos en un componente padre(por ahora solo lo pongo en el index.js),yo normal podria juntarlos y crear cinco componentes padres(todavia no lo hago) pero como podria cambiar estos componentes padres con un boton siguiente y atras para que funcionione,he visto ejemplos con id como un contador,pero como seria los ajustes para este caso?

//Este el componente que compone los inputs y labels

function Valor(props) {
        return (
            <div className="form-group centm">
                <label htmlFor="ㅤ">{props.pregunta}</label>
                <input type="number" className={props.name} />
            </div>
        );
    }

export default Valor;

//Este el componente de los botones ,todavia no le puesto el onclick

function Boton(props) {
    return (
        <button className={'btn ' + props.btnclass}>{props.btname}</button>
    );
}

export default Boton;

Me podrian indicar algun metodo mejor,o que metodo deberia usar;si pudieran como un ejemplo minimo?

Conjunto 1

Conjunto2

reactjs – React Native NativeBase Looping Tabs issue

Am using Expo React Native and Native Base library,

While am trying to loop through an array to output Tabs (each user have his own number of tabs)

       <Tabs>

        {sectionsTabs.map(section => <Tab
          heading={section.section_name}
          style={{backgroundColor: '#0e0e0e'}}
        >
          <Text>{section_id}</Text>
        </Tab>)}
      </Tabs>

SectionsTabs is an array

Below is the error message am getting

enter image description here

reactjs – How to re execute componentDidMount again when i click the component again?

enter image description here

This is my top navbar of my project and
enter image description here

when i click on blogs button list of all blogs will rendered and in this component i have a search option now when i have search text let’s say “vue” then i will get the required result

handleSubmit = values => {
    const { size } = this.state;
    this.setState({ searchString: values.searchString, isSearch: true });
    SearchSchema.searchString = this.state.searchString;
    this.props.history.push(`/blogs?q=${values.searchString}`);
    this.props.actions.loadBlogs({ page: 0, size, searchString: values.searchString });
  };

and this is componentDidMount of Blog Component

componentDidMount = () => {
    const { size } = this.state;
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    if (q) {
      this.setState({ searchString: q, isSearch: true });
      this.props.actions.loadBlogs({ page: 0, searchString: q, size });
    } else {
      this.setState({ searchString: '', isSearch: false });
      this.props.actions.loadBlogs({ page: 0, size });
    }
  };

After getting the result when i again clicked on Blogs from Top Navbar (in screenshot) url is getting changed but not getting all the blogs

<Link className="nav-link" to="/blogs">
            Blogs
          </Link>

enter image description here

screenshot with search result and url will be http://localhost:8075/blogs?q=vue
same screenshot is also applicable when i clicked blogs button again url is getting changed but blogs is not updated http://localhost:8075/blogs

reactjs – Sharing React Native Component as a “black box”

Looking for a way to share a react native component with 3rd parties without having to share the actual source code.

Something like a .jar in java or a .dll for C#.

Is this possible?

Ideally i want others to be able to

import CustomComponent from '...myCustomComponent';

but not being able to look in the actual code.

Any thoughts are welcome.

reactjs – React Bootstrap component (Form.Control) OnChange event listener doesn’t fire when select all text and delete

I am using Form.Control in form , and when changing the input , I use onChange event listener, to handle the change
as in this snapshot :

<Form.Control
      className="form-control"
      type="text"
      id={props.id}
      defaultValue={props.placeholder}
      onChange={(e) => {
        updateInput(e);
      }}
></Form.Control>

all changes work fine , adding chars , deleting ,,etc ,
But when => Select ALL text and hit backspace , onChange event Listener , isn’t fired !
ps : selecting part of the text and deleting it , fires the onChange .

reactjs – React con Javascript y Typescript

Muy buenas a todos!

Actualmente trabajo en un proyecto con react creo que fue creado con npx create-react-app name_project hace dos años. Mi pregunta es si se puede añadir el compilador de typescript a este proyecto con el objetivo de añadir nuevos archivos tipo .tsx a los ya existentes sin modificar los originales.

De antemano, gracias por la ayuda!

reactjs – How vue-cli works versus create-react-app

What is the difference between CRA (create-react-app) and Vue CLI? I recently had to learn Vue.js for a new project, first I read the article “Comparison with other frameworks” in the official Vue documentation, I came across the topic “Scaling” where they talk about vue-cli and create-react-app. So far I have no idea how Vue works since I’m still a beginner, but I’m pretty familiar with React so my question concerns those who know Vue.js

When using CRA (create-react-app), there are pros and cons (of course, experienced developers can use Webpack), but I wanted to quote from one article one of the main cons of CRA

CRA, it seems to me, is overloaded with opportunities that, in some
project, may well turn out to be unclaimed. For example, application
stubs built with CRA support SASS. That is, if your project uses
regular CSS or Less, SASS support will be completely unnecessary.
Here, if you’re interested, is the CRA application package.json file
after the eject command. This file deploys dependencies previously
provided by react-scripts.

Therefore, I want to understand how vue-cli differs from CRA. If I understand correctly in vue I use vue-cli, so I want to understand whether vue-cli has such disadvantages as in CRA or I use a completely different approach there?

reactjs – Hi guys, there is some problem RTCPeerConnection.onicecandidate doesn’t work

you guys do wonderful things doing help people, I appreciate that, thanks for everything.

So let’s ask question. I am learning webRTC, socket.io and English :D(its why I don’t understand documents :/ ) with ReactJS and ExpressJS. I tried to build basic voice chat, but I can’t work the RTCPeerConnection.onicecandidate. functions and console.logs are not working in onicecandidate ,
This is my React Code;

  componentDidMount() {
this.socket = io.connect(this.serverIP);
this.pc = new RTCPeerConnection(this.pc_config);
console.log("We are trying to connect +", this.socket);
this.getmyAudio();

this.socket.on("online-peer", (socketID) => {
  console.log(socketID + "- Id user connected");
  this.pc.createOffer(this.sdpConstraints).then((sdp) => {
    this.pc.setLocalDescription(sdp);
    this.sendToPeer("offer", sdp, {
      socketID: socketID,
      remote: this.socket.id,
    });
  });
});

this.socket.on("offer", (data) => {
  console.log("I got an offer omg " + data.socketID + " " + this.socket.id);
  this.pc
    .setRemoteDescription(new RTCSessionDescription(data.sdp))
    .then(() => {
      this.pc.createAnswer(this.sdpConstraints).then((sdp) => {
        this.pc.setLocalDescription(sdp);
        this.sendToPeer("answer", sdp, {
          socketID: data.socketID,
          remote: this.socket.id,
        });
      });
    });
});

this.socket.on("answer", (data) => {
  console.log("answer-client");
  console.log(data.sdp)
  this.pc.setRemoteDescription(new RTCSessionDescription(data.sdp)).then(()=>{
    this.pc.onicecandidate = (e) => {
      console.log(" we are in candidate")
      this.sendToPeer("candidate", e.candidate, data.socketID);
    }
  })
});

this.socket.on("candidate", (data) => {
  this.pc.addIceCandidate(data);
  console.log("addIceCandidate");
});

}

and this is answer data =>

  type: 'answer',
  sdp: 'v=0rn' +
    'o=- 198o215oooo54570o69 3 IN IP4 127.o.o.orn' +
    's=-rn' +
    't=0 0rn' +
    'a=extmap-allow-mixedrn' +
    'a=msid-semantic: WMSrn'
}

and this is socket.io code

const app = express();

var io = require("socket.io")(4001); 

const port = 8080;

const server = app.listen(port, () => {
  console.log(`Sunucu ${port}. port'ta çalışıyor...`);
});

app.use(express.static(__dirname + "/build"));
app.get("/", (req, res, next) => {
  res.sendFile(__dirname + "/build/index.html");
});

io.listen(server);


io.on("connection", (socket) => {
  console.log("Someone connected +" + socket.id);

  socket.on("disconnect", () => {
    console.log(`${socket.id}- ID user disconnected`);
  });
});


const peers = io.of("/room");
let connectedPeers = new Map();


peers.on("connection", (socket) => {
 
  connectedPeers.set(socket.id, socket);


  console.log("Someone connected ------" + socket.id);
 

  socket.on("onlineUsers", (data) => {
    for (const socketID of connectedPeers.entries()) {
      if (socketID(0) !== data.socketID.socketID) {
        socket.emit("online-peer", socketID(0));
      }
    }
  });

  socket.on("disconnect", () => {
    console.log("disconnected -" + socket.id);
    connectedPeers.delete(socket.id);
  });

  socket.on("offer", (data) => {
    for (const (socketID, socket) of connectedPeers.entries()) {
      if (socketID === data.socketID.socketID) {
        socket.emit("offer", { sdp: data.sdp, socketID: data.socketID.remote });
      }
    }
  });

  socket.on("answer", (data) => {
    console.log("answer-server");
    for (const (socketID, socket) of connectedPeers.entries()) {
      if (socketID === data.socketID.socketID) {
        socket.emit("answer", {sdp:data.sdp, socketID:data.socketID.remote});
      }
    }
  });

  socket.on("candidate", (data) => {
    for (const (socketID,socket) of connectedPeers.entries()) {
      if (socketID === data.socketID) {
        socket.emit("candidate", data);
      }
    }
  });
});