DEV Community: Amiltonxavier

React checkbox, only select the first item when I click on the label no matter which label I click.

Amiltonxavier — Fri, 19 Feb 2021 07:26:05 +0000

I'm using React.js for my frontend and I'm doing category filters, but for that I used checkbox to mark the category I want and label to show the name of the category, I look like the figure below.Now I made a change and passed the input id to label. What is happening is the following whenever I click for whatever label it just selects a first item to be shown. No matter what label I click on, it only selects the first option.

const [checked, setChecked] = useState([])

    const handleToggle = c => () => {
        //return thr first index or -1
        const currentCategoryId = checked.indexOf(c)
        const newCheckedCategoryId = [...checked]
        // if currently not currently in verified state> push
// otherwise pull / take off
        if(currentCategoryId === -1){
            newCheckedCategoryId.push(c)
        } else{
            newCheckedCategoryId.splice(currentCategoryId, 1)
        }


        setChecked(newCheckedCategoryId);
        setChecked(newCheckedCategoryId);
        handleFilters(newCheckedCategoryId)
    }

    return categories.map((c, i) => (
        <li key={i} className="list-group-item d-flex justify-content-between lh-condensed list-unstyled">
            <input 
                type="checkbox"
                className="form-check-input"
                onChange={handleToggle(c._id)}
                value={checked.indexOf(c._id === -1)}
                id="checkbox"
            />
            <label htmlFor="checkbox" className="form-check-label">{c.name}</label>
        </li>
        ));

Error when I delete a user: Unhandled Rejection (TypeError): Cannot read property 'error' of undefined

Amiltonxavier — Tue, 16 Feb 2021 16:56:39 +0000

Estou tentando excluir um usuário dentro do meu aplicativo, quando clico no botão que chama a função de exclusão, estou entendendo errado, Rejeição não tratada (TypeError): Não é possível ler a propriedade 'erro' de indefinido. mas quando eu atualizo a página, o usuário é excluído.

export const deleteUser = (clientId, userId, token) => {
    return fetch(`${API}/user/${clientId}/${userId}`, {
        method: 'DELETE',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            Authorization: `Bearer ${token}`
        }
    })
        .then(response => {
            return response.json();
        })
        .catch(err => console.log(err));
};

const destroy = clientId => {
        deleteUser(clientId, user._id, token).then(data => {
            if(data.error) {
                console.error(data.error);
            }else{
                loadUser();
            }
        })
    }

<button onClick={()=> destroy(person._id)} className="btn btn-danger btn-sm">Deletar</button> 

//Node backend

exports.remove = (req, res) =>{
    User
    .findByIdAndRemove(req.params.clientId)
    .exec()
    .then(doc => {
        if(!doc) { return res.status(404).end();}
        return res.status(204).end();
    }) 
    .catch(err => next(err));
}

Chart.js Chart displays but no data

Amiltonxavier — Fri, 12 Feb 2021 11:21:38 +0000

I'm using React with react-chartjs-2 I'm passing the data to the data. But I am getting a Graph without data. ATT: inside the data I'm mapping a product object

const [chartData, setChartData] = useState({})
    const products= [
        {name: "PC", solds: 34},
        {name: "Mouce", solds: 55},
        {name: "keyboard", solds: 6},
        {name: "Process", solds: 2},
    ]
    const chart = () => {
        setChartData({
            labels: ['PC', 'Mouse', 'Keyboard', 'Process' ],
            datasets: [{
                label: 'Level of Thiccness',
                data: [Object.entries(products).map(names => names.solds)],
                backgroundColor: [
                    'rgba(75, 192, 192, 0.6)'
                ],
                borderWidth: 4
            }]
        })
    }

    useEffect(() => {
        chart();
    }, [])
    return (
        <div>
            <Line 
            data={chartData}
            />
        </div>
    )
}

ValidationErrorsCollection: Braintree I don't know why I'm getting this error

Amiltonxavier — Tue, 02 Feb 2021 13:45:05 +0000

I'm using braintree in application. some time ago it worked without any problem. now it doesn't always work and when it doesn't. I get this error on console: ValidationErrorsCollection.
Node.js code


    const gateway = new braintree.BraintreeGateway({
        environment:  braintree.Environment.Sandbox,
        merchantId:   process.env.BRAINTREE_MERCHANT_ID,
        publicKey:    process.env.BRAINTREE_PUBLIC_KEY,
        privateKey:   process.env.BRAINTREE_PRIVATE_KEY
    });


    exports.generateToken = (req, res) => {
        gateway.clientToken.generate({}, function(err, response) {
             //Se verdade vamos trazer o token
                if(err){
                    res.status(500).send(err)
                }else{
                    res.send(response)
                }
        });
    };

    exports.processPayment = (req, res) => {
        let nonceFromTheClient = req.body.paymentMethodNonce
        let amountFromTheClient = req.body.amount

        //charge


        let newTransaction = gateway.transaction.sale({
            amount: amountFromTheClient,
            paymentMethodNonce: nonceFromTheClient, 
            options: {
                submitForSettlement: true
            }
        }).then(function (result) {
              if (result.success) {
                res.json(result);
              } else {
                  console.log(result.errors)
                //res.status(500).json(error); 
              }
              }).catch(function (err) {
                console.error(err);
              });

    }

How can I fix this

Amiltonxavier — Sun, 31 Jan 2021 03:07:53 +0000

hi there guys,. I'm getting data from my API, when I make a console.log or JSON.stringify in the API data it shows without problems but when I pass the data in a table with the map, simply nothing is presented in the table.

ATT: My API Responde status 302

const UserData =() => {
const [users, setUsers] = useState([]); 
    const loadUser = () => {
        getUsers().then(data => {
            if(data.error) {
                console.log(data.error)
            }else{
                setUsers(data)
            }
        })
    }
useEffect(() => {
        loadUser();
    },[]);

const inforUsers = () => {
        return(
            <Fragment>
            <table className="table table-bordered mb-5">
                <thead className="thead-dark">
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Nome</th>
                        <th scope="col">Email</th>
                        <th scope="col">role</th>
                        <th scope="col">createdAt</th>
                    </tr>
                </thead>
                <tbody scope="row">
                {Object.keys(users).map((values, key) => (
                    <tr key={key}>
                        <td>
                            {values._id}
                        </td>
                        <td>
                            {values.name}
                        </td>
                        <td>
                            {values.email}
                        </td>
                        <td>
                            {values.role === 1? 'Admin' : 'Simples User'}
                        </td>
                        <td>
                            {values.createdAt}
                        </td>
                    </tr>
                ))} 
                </tbody>
            </table>
            </Fragment>
            )
    }
 return(
        <>
         <div className="container mt-5">
             {console.log(users)}
            {inforUsers()}
         </div>

        </>
    )

}

UnauthorizedError: invalid signature

Amiltonxavier — Sat, 10 Oct 2020 02:24:50 +0000

I'm having this error in the backend of my application, I think it's because of express-jwt exactly in my secret.
whenever I try to create a new category the error appears.
if anyone wants to help me I will leave the links to my repository down here.
backend: https://github.com/Amiltonxavier/ecommerce-backend.git
frontend: https://github.com/Amiltonxavier/ecommerce-frontend.git