Роман Александрович

https://developer.mozilla.org/ru/docs/Web/API/Form...

файл HomePage.js:

import React, {Component} from 'react';

class Homepage extends Component {
    render(){
        return (
          <div className="wrap">
            
           <h1>
            Home Page Content
           </h1>
            
            <p>
           
            </p>
            
            
          </div>     
        )
    }
}

export default Homepage;

Вы просто должны понимать что AsyncStorage из react-native больше не поддерживается. Это означает что если в данный момент найдется какая то бага в пакете, то ее будут фиксить в @react-native-community/async-storage. Но если вы собираетесь использовать 2 функции: положить, и достать то я думаю ничего страшного не будет. Даже больше скажу если в один замечательный день вы решите все таки установить @react-native-community/async-storage то функции обратно совместимые так что ваше приложение не должно почувствовать замены пакета.

https://jsfiddle.net/xy7zors6/

для того что бы положить ключ в state не name а его значение

https://habr.com/ru/company/macte/blog/344368/
https://github.com/react-dnd/react-dnd

https://jsfiddle.net/1r2pkh9x/8/

className={isRender?"myClass":null}

вот авторизация из живого проекта

const logInWithLoagInAndPassword = (login, password, organization, rememberMe) => {
    return dispatch => {
        return fetch(BASE_URL + '?username=' + login + '&password=' + password + '&customer=' + organization + '&remember=' + remember + '&login=Inloggen&ajax=1', {
            method: 'GET',
            headers: {
                "Access-Control-Allow-Origin": "*"
            }
        }).then(response => {
            return response.json();
        }).then(json => {
                if (rememberMe) {
                    localStorage.setItem('sessionid', json.sessionid)
                    localStorage.setItem('auth', JSON.stringify(json))
                } else {
                    //clear localstorage
                }
                dispatch({type: AUTH_SUCCESS, payload: json})
            }
        )


            .catch(error => {
                console.error('error', error)
                dispatch({type: AUTH_ERROR, payload: error})
            });
    }
}

как видите мы после авторизации получаем ответ от сервера в котором есть id сессии который мы и ложим в  localstorage. Дальше при переходе человека на этот же сайт стоит проверка если есть в localstorage id сессии кидаем его на главную если нет то на авторизацию.

https://www.npmjs.com/package/@fortawesome/free-re...

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {         
      newPerson: {
      }
    };
    this.getInputNameValue = this.getInputNameValue.bind(this);
    this.getInputSurnameValue = this.getInputSurnameValue.bind(this);
    this.getInputCityValue = this.getInputCityValue.bind(this);
    this.addToDatabase = this.addToDatabase.bind(this);
  }

  setNewPerson=(user)=>{
this.setState({
newPerson:user
})
}

  addToDatabase() {
    fetch(`http://127.0.0.1:3000/add/${this.state.newPerson}`, {
      method: 'PUT'
    })
      <...>
  }

  render() {
    return (
      <div>      
        <InputForm setNewPerson={this.setNewPerson} />          
        <Footer addToDatabase={this.addToDatabase}/>
      </div>
    );
  }
}
class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user:{
      nameP: '',
      surnameP: '',
      cityP: '',
      value: ''
}
    };
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleSurnameChange = this.handleSurnameChange.bind(this);
    this.handleCityChange = this.handleCityChange.bind(this);    
  }

  handleNameChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{nameP:event.target.value})
    this.setState({ user: newUser });
    this.props.setNewPerson(this.state.user);
  }

  handleSurnameChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{surnameP:e.target.value})
    this.setState({ user: newUser });
   this.props.setNewPerson(this.state.user)
  }

  handleCityChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{cityP:e.target.value})
    this.setState({ user: newUser });
    this.props.setNewPerson(this.state.user)
  }

  render() {
    return (
      <form className='row form'>        
            <label className='col-4 form__label' htmlFor='surnameMembers'>Фамилия</label>
            <input className='col-6 form-control' id='surnameMembers' name='surnameMembers'
              type='text' required value={this.state.surnameP}
              onChange={this.handleSurnameChange}
            />          
            <label className='col-4 form__label' htmlFor='nameMembers'>Имя</label>
            <input className='col-6 form-control' id='nameMembers' name='nameMembers'
              type='text' required value={this.state.nameP}
              onChange={this.handleNameChange}
            />
            <label className='col-4 form__label' htmlFor='cityMembers'>Город</label>
            <input className='col-6 form-control' id='cityMembers' name='cityMembers'
              type='text' required value={this.state.cityP}
              onChange={this.handleCityChange}
            />        
      </form>
    );
  }
}

componentWillReceiveProps(nextProps) {
        console.log("nextProps.idcat",nextProps.idcat)
if (nextProps.idcat!==undefined){
fetch(`${ENV.API_PROT}${ENV.API_LINK}/api/${ENV.API_VER_GLOBAL}/categories/${nextProps.idcat}`)
            .then(response => response.json())
            .then(json => { 
                console.log(json);
                this.setState({
                    sameNews: json.data,
                    isLoading: false
                });
                console.log(this.state.sameNews);
            });
}
      
    }