when using hooks and react-select I've got this error: TypeError: Object(...) is not a function

Viewed 769

I'm using react-select and passed from component to hooks. I hope it been more comfortable.

When I add a todo to asociatedTodos I've got this error:

TypeError: Object(...) is not a function

I'm using react-select, in replace of componentDidMount, I'm using useEffect and for bring the action I'm using useDispatch, and for selected value and setValue from onChange I'm using useState.

This is my code:

import React, {
    useState,
    useEffect,
    useDispatch
} from 'react';

import Select from 'react-select';
import "./styles.css";

import {
    searchTodos
} from '../../actions/ServiceActions';



const SelectInput = ({
    label,
    input,
    width,
    placeholder,
    meta: {
        touched,
        error
    },
    ...rest
}) => {
    const [todo, setTodo] = useState();

    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(this.props.searchTodos());
    }, [])
    return ( <
        div className = 'form-container' >
        <
        label forname = {
            input.name
        } > {
            label
        } < /label> <br / >
        <
        Select {
            ...rest
        }
        placeholder = {
            !input.value ? 'please, select a todo' : input.value
        }
        selected = {
            input.value ? input.value : null
        }
        onBlur = {
            input.onBlur
        }
        value = {
            tarea
        }
        onChange = {
            setTodo
        }
        options = {
            dispatch(this.props.searchTodos())
        }
        className = 'form-control' /
        >
        <
        div className = 'text-danger'
        style = {
            {
                marginBottom: '20px'
            }
        } > {
            touched && error
        } <
        /div> <
        /div>
    );
};

export default SelectInput;

I would like to know what method is in replace of connect. Connect method only serves for class component. What method equivalent to connect serves for functional component to get all todos from reducer todo using react hooks.

You can guide by Using react-select I've got next issue: Cannot read property 'value' of undefined

to explain how I can select a determinate todo and change value using hooks, using a todoList as reducer and hooks.

All I want is search a determinated todo through todoList reducer, select a determinated todo, change todo value on dropdown (Select component) and fetch todoList throught action "searchTodos" using hooks.

0 Answers
Related