Update Url With Value from Input on Click With React

class SearchInput extends Component {  constructor() {    super()
    this.state = {      query: ''    }  }  static contextTypes = {       router: React.PropTypes.object   }    handleSearch = () => {         this.context.router.push(`'/search/${this.state.query}/some-action'`);  }  queryChange = (evt) => {    this.setState({query: evt.target.value})  }
  render() {    const { handleSearch, placeholder } = this.props    return (      <form>        <input id="site-search" type="search" placeholder={placeholder} value={this.state.query} onChange={this.queryChange} />        <input type="submit" value="Search" onClick={this.handleSearch} />      </form>    )  }}

How to bind an input's value to a link in react

I think you want to achieve conditionally firing an effect

Example

 useEffect(() => {

    // This will execute whenever 'query' variable changes.       
 
 }, [ query ]);
    

// You can bind the state using the 'value' attribute.

<input 
   placeholder="Search"
   type="text"
   value={query}
   onChange={(e) => setQuery(e.target.value)}
/>

add and update input value sequentially on click event in reactjs

I spent sometime tweaking your existing code in the linked sandbox
I am not sure what is the purpose of "length" in the array objects, So I replaced that with an id to track things easy.

import React from "react";
import Grid from "@material-ui/core/Grid";
import "./App.css";

class ModalDemo extends React.Component {
  state = {
    showModal: false,
    caption: "",
    modalSrc: "",
    locationSiteList: [
      {
        sideName: "Ceiling",
        id: "C"
      },
      {
        sideName: "Floor",
        id: "F"
      },
      {
        sideName: "East wall",
        id: "EW"
      }
    ]

    // ...rest of the state
  };
  insertSides = (item) => {
    const locationSiteList = [...this.state.locationSiteList];
    var count = locationSiteList.filter((obj) => obj.id === item.id).length;

    var position = locationSiteList.indexOf(item);
    position = position + count;

    count = count + 1;

    locationSiteList.splice(position, 0, {
      sideName: item.sideName + count,
      id: item.id
    });

    this.setState({ locationSiteList: locationSiteList });
  };

  render() {
    return (
      <div>
        <Grid item xs={12}>
          {this.state.locationSiteList.map((dev, key) => (
            <Grid container style={{ marginTop: "8px" }}>
              <Grid item xs={3} style={{}}>
                <input
                  disabled
                  style={{ width: "100%" }}
                  type="text"
                  value={dev.sideName}
                />
              </Grid>

              <Grid item xs={1} style={{ paddingLeft: "20px" }}>
                <input style={{ width: "100%" }} type="text" />
              </Grid>

              <button
                style={{ marginLeft: "20px" }}
                type="button"
                fullWidth="true"
                variant="contained"
                onClick={() => {
                  this.insertSides(dev);
                }}
              >
                Add
              </button>
            </Grid>
          ))}
        </Grid>
      </div>
    );
  }
}

export default ModalDemo;

This has an limitation if the user clicks on "Ceiling2" Add button it creates new item "Ceiling23".
To avoid this only allow the 3 initial buttons and hide the rest.

How to change input value when click on another input box in React

You can play around with my changes here.

import React, { Component } from "react";

export default class Api extends Component {
  state = {
    countries: [],
    countryName: "",
    countryCode: ""
  };

  handleCountryPick = (event) => {
    event.preventDefault();
    const country = this.state.countries.find(
      (country) => country.name === event.target.value
    );
    this.setState({
      countryCode: country.callingCodes,
      countryName: country.name
    });
  };

  async componentDidMount() {
    const response = await fetch("https://restcountries.eu/rest/v2/all");
    const countries = await response.json();
    this.setState({ countries: countries });
  }

  render() {
    return (
      <div>
        <h1 className="text-center">Api</h1>
        <h2>country details</h2>
        <CountrySelector
          countries={this.state.countries}
          countryName={this.state.countryName}
          onCountryPickHandler={this.handleCountryPick}
        />
        <CountryCodeInput countryCode={this.state.countryCode} />
      </div>
    );
  }
}

const CountrySelector = ({ countryName, countries, onCountryPickHandler }) => {
  const options = countries.map((country) => (
    <option key={country.name} value={country.name}>
      {country.name}
    </option>
  ));
  return (
    <div>
      <select value={countryName || "none"} onChange={onCountryPickHandler}>
        {options}
        <option value="none">None</option>
      </select>
    </div>
  );
};

const CountryCodeInput = ({ countryCode }) => {
  return (
    <div>
      <label>Country Code: </label>
      <input type="text" value={countryCode} />
    </div>
  );
};

Here is what you need to learn to be able to implement from scratch:

1. data binding is one-way, from parent to child, that is why you need to keep your handler (callback) handleCountryPick in the parent that keeps the state countries, countryName, countryCode.
2. time when updates happen and which components know what at which moment.

React: On button click: Go to URL declared in input form

Making you input fully controlled should do the trick. Explanation in code comments

class MyComponent extends React.Component {  state = {    code: '' // initial value  }    // save code in state on change  setCode = e => this.setState({code: e.target.value})    // change href to be this.state.code value  go = e => {    e.preventDefault()        window.location.href = this.state.code  }    render(){    return (        <form>          {/* make input fully controlled */}          <input type="text" name="code" value={this.state.code} onChange={this.setCode} placeholder="http://www.google.de" />          {/* handle button click event*/}          <input type="button" value={`Go to ${this.state.code}`} onClick={this.go}/>        </form>    )  }}
ReactDOM.render(<MyComponent/>, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="root" />