search-with-store.jsx

import React, { useState } from 'react';
import { inject } from 'mobx-react';

const Search = ({ updateName }) => {
  const [value, setValue] = useState('');

  const handleValue = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('form submitted', value);
    setValue('');
  };

  const handleName = () => {
    updateName('Cemil');
  };

  return (
    <form
      onSubmit={handleSubmit}
    >
      <input
        aria-label="song"
        type="text"
        placeholder="Sarki ismini giriniz"
        onChange={handleValue}
        value={value}
      />
      <button
        type="button"
        onClick={handleName}
      >
        Ismi Guncelle
      </button>
      <button
        type="submit"
      >
        Ara
      </button>
    </form>
  );
};

export default inject((stores) => ({
  updateName: stores.Store.updateName,
}))(Search);