react-icons/fa#FaEdit JavaScript Examples

The following examples show how to use react-icons/fa#FaEdit. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ColumnsConfig.js    From HexactaLabs-NetCore_React-Initial with Apache License 2.0 6 votes vote down vote up 
renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="provider-list__button" to={`/provider/view/${value}`}>
      <FaSearch className="provider-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="provider-list__button" to={`/provider/update/${value}`}>
      <FaEdit className="provider-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="provider-list__button" to={`/provider/remove/${value}`}>
      <FaTrash className="provider-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}
Example #2
Source File: ColumnsConfig.js    From HexactaLabs-NetCore_React-Initial with Apache License 2.0 6 votes vote down vote up 
renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="store-list__button" to={`/store/view/${value}`}>
      <FaSearch className="store-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="store-list__button" to={`/store/update/${value}`}>
      <FaEdit className="store-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="store-list__button" to={`/store/remove/${value}`}>
      <FaTrash className="store-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}
Example #3
Source File: ColumnsConfig.js    From HexactaLabs-NetCore_React-Level2 with Apache License 2.0 6 votes vote down vote up 
renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="product-list__button" to={`/product-type/view/${value}`}>
      <FaSearch className="product-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="product-list__button" to={`/product-type/update/${value}`}>
      <FaEdit className="product-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="product-list__button" to={`/product-type/remove/${value}`}>
      <FaTrash className="product-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton}
      {editButton}
      {removeButton}
    </span>
  );
}
Example #4
Source File: ColumnsConfig.js    From HexactaLabs-NetCore_React-Final with Apache License 2.0 6 votes vote down vote up 
renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="product-list__button" to={`/product/view/${value}`}>
      <FaSearch className="product-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="product-list__button" to={`/product/update/${value}`}>
      <FaEdit className="product-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="product-list__button" to={`/product/remove/${value}`}>
      <FaTrash className="product-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton}
      {editButton}
      {removeButton}
    </span>
  );
}
Example #5
Source File: ColumnsConfig.js    From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 6 votes vote down vote up 
renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="provider-list__button" to={`/producttype/view/${value}`}>
      <FaSearch className="provider-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="provider-list__button" to={`/producttype/update/${value}`}>
      <FaEdit className="provider-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="provider-list__button" to={`/producttype/remove/${value}`}>
      <FaTrash className="provider-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}
Example #6
Source File: ColumnsConfig.js    From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 6 votes vote down vote up 
renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="producttype-list__button" to={`/producttype/view/${value}`}>
      <FaSearch className="producttype-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="producttype-list__button" to={`/producttype/update/${value}`}>
      <FaEdit className="producttype-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="producttype-list__button" to={`/producttype/remove/${value}`}>
      <FaTrash className="producttype-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}
Example #7
Source File: AddTodo.js    From react-todo-app with MIT License 5 votes vote down vote up 
function AddTodo(props) {
  const [title, setTitle] = useState("");

  const onSubmit = (evt) => {
    // Stop form being submmited to same file and reloading the page
    evt.preventDefault();

    // Validate todo text
    if (!title) {
      alert("Please add a task description.");
      return;
    }

    props.addTodo(title);

    // Clear task text in component state
    setTitle("");
  };

  return (
    <div className="mx-4 mt-6">
      <form onSubmit={onSubmit} className="flex items-center transition duration-500 ease-in-out py-2 border-b-2 border-gray-300 focus-within:border-b-2 focus-within:border-pink-600">
        <input
          name="task-title"
          type="text"
          placeholder="Add task..."
          value={title}
          onChange={(evt) => setTitle(evt.target.value)}
          className="flex-1 px-2.5 bg-gray-200 placeholder-gray-500 focus:outline-none"
          data-testid="task-input-field"
        />
        <button
          type="submit"
          className="transition duration-200 ease-in-out text-gray-400 focus:outline-none hover:text-pink-500 text-lg px-2 cursor-pointer"
          data-testid="task-submit-btn">
          <FaEdit />
        </button>
      </form>
    </div>
  );
}