0

I am making a Shopify app using Shopify Polaris. I used the ActionList component. https://polaris.shopify.com/components/actions/action-list

I want to change the state value on the onAction event. I did like this.

   const [searchValue, setSearchValue] = useState('');
   const handleAction = (value) => {
      setSearchValue(value);
   }
   const a = ["A","B"];

   const searchResultsMarkup = (

    <ActionList
       items={[
            {
              content: a[0],
              onAction: handleAction(a[0]),
            },
            {
              content: a[1],
              onAction:  handleAction(a[1]),
            },
    />
    
  );

I am a beginner in React. So maybe a silly question. but kindly teach me.

Thanks

RM-Digit
  • 94
  • 8

1 Answers1

0

You are passing it down as a prop, so you will have to change it within the Component.

import React, { useState } from 'react';

export const Parent = () => {
  const [searchValue, setSearchValue] = useState('');
  const handleAction = value => {
    setSearchValue(value);
  }
  return <ActionList changeSearchVal={handleAction} />
}

export const ActionList = ({ changeSearchVal }) => {
  return (
    <form>
      <input type="text" onChange={e => changeSearchVal(e.target.value)}/>
    </form>
  )
}

If you want to change the searchValue within ActionList.

marsh
  • 136
  • 6
  • Thanks for your quick reply. Do you know how to update the state value without using useEffect. So I want to destroy the async. – RM-Digit Jan 16 '21 at 09:19