Day: May 11, 2020

How to add image src to the state in multi step form in react via /r/reactjs

Posted on Posted in Hot-react, javascript-react, TweetTagged , , , , , Leave a comment

I’m making an multiStep form for my project that is inspired from Brad Traversy’s Tutorial of making Multi-Step form in React. So as per the basic structure of this form

​

structure of multi step form

I made a main Parent component called Multistep as below

import React, { Component } from 'react' import StepOne from './StepOne' export class Multiform extends Component { state={ step:1, input:'', select:'' } // Proceed to next step nextStep = () => { const { step } = this.state; this.setState({ step: step + 1 }); }; // Go back to prev step prevStep = () => { const { step } = this.state; this.setState({ step: step - 1 }); }; // Handle fields change handleChange = input => e => { this.setState({ [input]: e.target.value }); }; render() { const { step } = this.state; const { input, countryFlag, select } = this.state; const values = { input, countryFlag, select }; switch(step){ case 1: return( <StepOne nextStep={this.nextStep} handleChange={this.handleChange} values={values} /> ) } } export default Multiform

and a child component StepOne as below

import React, { Component } from 'react' export class StepOne extends Component { continue = (e) => { e.preventDefault(); this.props.nextStep(); }; back = (e) => { e.preventDefault(); this.props.prevStep(); }; state = { countryFlag: 'https://raw.githubusercontent.com/MeRahulAhire/country-calling-code-html/master/phone_icon.png', }; render() { const selectCountryChange = () => { const img = document.querySelector('#img'); const select = document.querySelector('#country'); img.src = `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`; this.setState({ countryFlag: `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp` }); }; const { values, handleChange, } = this.props; return ( <div> <button onClick={this.back} className="col-form-prev"> <input type="email" placeholder="your-email@example.com" onChange={handleChange('input')} defaultValue={values.input} /> <div class="image" onChange={selectCountryChange}> <img src={this.state.countryFlag} id="img"/> </div> <select id="country" onChange={handleChange('select')} defaultValue={values.select}> <option data-countryCode="IN" value="91">India</option> <option data-countryCode="US" value="1">US</option> <option data-countryCode="GB" value="44">UK</option> </select> </div> ) } } export default StepOne

according to that tutorial, everything for text input field the state management was working absolutely fine. Even when i tried to go next step and come back, the data was still accessible and persisted in that <input/> and <select/> field.

I also tried to store the image source in Multiform state but with an another onChange handler but i wasnt able to figure out exactly how to do that.

The img.src is manipulated by the selectCountryChange in stepOne as below

state = { countryFlag: 'https://raw.githubusercontent.com/MeRahulAhire/country-calling-code-html/master/phone_icon.png', }; const selectCountryChange = () => { const img = document.querySelector('#img'); const select = document.querySelector('#country'); img.src = `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`; this.setState({ countryFlag: `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp` }) <div class="image" onChange={selectCountryChange}> <img src={this.state.countryFlag} id="img"/> </div>

Can anyone please guide me on how to add the img.src to the state of Multiform and make it persistent even when i go back and forth of the form just the <input/> and <select/>. You can also checkout my project repo for more info.

from How to add image src to the state in multi step form in react https://ift.tt/3dyHb11

Client-side-only React is not sustainable. via /r/reactjs

Posted on Posted in Hot-react, javascript-react, TweetTagged , , , , , Leave a comment

from Client-side-only React is not sustainable. https://ift.tt/2yBGRA1

How to handle backend API request for Create-react-app build and ran using “serve-s build”? via /r/reactjs

Posted on Posted in Hot-react, javascript-react, TweetTagged , , , , , Leave a comment
I have create-react-app bootstrapped application which I build and then serve it to the static server using serve-s build. The React app is running on http://locahost:3000.

This app talks to my backend REST API(using java) which is running on http://locahost:8080.

Inside my React application, I have set axios.default.baseURL=http://localhost:8085/api.

Everything is fine until the application is running on the localhost on my system. The React app talks to http://localhost:8085/api/xyz for CRUD operations and everything works great.

Now I have to deploy the project on AWS EC2 instance. The MySQL and REST API got deployed and rest API there is working on the same port as http://locahost:8080. I have Apache server configured which sends the hostname(www.myxyzwebsite.com) to the http://locahost:3000 on the server. Everything is fine till now. The home page is visible on the browser.

Now, when the React app tries to communicate to the REST API from the browser, it is sending the request to the http://locahost:8080. Obviously browser is looking for some service running on port 8080 on my system and it couldn’t find. Ideally, the request should go to the server with my hostname(www.myxyzwebsite.com/api/users/puspen).

NOTE: Please note that this is not a server-side-rendered application.

I have no idea how to handle this scenario. This is my first web project, please guide.

from How to handle backend API request for Create-react-app build and ran using “serve-s build”? https://ift.tt/2xUYxWS