TypeError: w.map is not a function-CodePudding

I am getting an error display data in react

TypeError: w.map is not a function
    at Object.children (1649264715696-bundle.js:1:42168)

Here is my data that I am reading from an input.

[{"username": "user1","goal": "$5,000,200"},{"username":"user2","goal": "$4,000,199" },{ "username":"user2","goal": "$4,000,198"}]

I Have stringify and parse the object

here a snippet of my code

const WeatherWidget = ({ id, editMode }) => {
 
  const [roles, setRoles] = useState([]);

  const validateJSON = (json = "") => {
   try {
     return JSON.parse(JSON.stringify(json));
   } catch (error) {
     return null;
   }
  }

 useEffect(() => {
    const setDataRole = (data) => {
      setRoles(data);
    }

    if (widgetApi && settings.jsonData) {
      var arr = validateJSON(settings.jsonData);
      setDataRole(arr);
    }
  }, [settings, widgetApi, editMode])

  return (
    <Container>
      <StyledUl>
        <Ticker>
          {({ index }) => (
            <>
              {roles.map(({ username, goal }, i) => (
                <>
                  {i === 0 ? null : ','}
                  <StyledSpanName>
                    <span className="name">{username}</span>
                  </StyledSpanName>
                    <StyledSpanGoal> <span className="goal">{goal}</span>. 
                 </StyledSpanGoal>
                </>
              ))
              }
            </>
          )}
        </Ticker >
      </StyledUl>
    </Container>
  );
};

if I copy the data and paste it directly into the setDataRole(the_data) it works

Please let me know how to resolve it.

CodePudding user response：

Can you try this

roles?.map((etc…))