React JSX rendering with axios response

Question

I need to ask this question because tried to fix that issue couple of hours. Now I created a simple layout and this is has a sidebar. There is a navigation in this block. I'm trying to get list of coins and iterate them in to list element.

sidebar.jsx

export default {

    Sidebar() {
        return (
            <div>
                <h3>Coins</h3>
                {
                    axios({
                        method: "GET",
                        url: "./ticker.json",
                    }).then(function (resp) {

                        let list = resp.data;
                        return Object.keys(list).map((key) => {
                            console.log(list[key].name);
                            return (<li key={key}>{list[key].name}</li>)
                        });

                    }).catch(function (errors) {

                        alert("Error thrown");
                    })
                }
            </div>
        )
}

I imported that sidebar.jsx in App.js, you can see whole App.js below

import Landing from './views/landing';
import Header from './components/header';
import Sidebar from './components/sidebar';

function App() {
    return (
        <div className="container-fluid">
            {Header()}
            <div className="row">
                <div className="col-md-2">
                    {Sidebar.Sidebar()}
                </div>
                <div className="col-md-10">
                    {Landing(logo)}
                </div>
            </div>

        </div>
    );
}

export default App;

I'm getting below error. I can't understand how to fix it.

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

I know axiosreturn Promise but I don't understand how to handle it. If someone could help me, that I'll much appreciated.

Please before anything else just read through reactjs.org/docs/faq-ajax.html — Alexander Staroselsky
– Alexander Staroselsky, Commented Sep 16, 2019 at 12:58
Why you want to call axios inside jsx doesn't make any sense — ANIK ISLAM SHOJIB
– ANIK ISLAM SHOJIB, Commented Sep 16, 2019 at 13:00
@anikislamShojib I just started to learn and develop something on react. Try to understand the life cycle. I think JSX files are separate components for react. Then I decided to use axios in JSX files. — Yasin Yörük
– Yasin Yörük, Commented Sep 16, 2019 at 13:04
@AlexanderStaroselsky Ooops I missed that doc. Thanks for the link. — Yasin Yörük
– Yasin Yörük, Commented Sep 16, 2019 at 13:04
Don't use axios inside jsx you can use componentDidMount in Cass component and useEffect in functional for Http call — ANIK ISLAM SHOJIB
– ANIK ISLAM SHOJIB, Commented Sep 16, 2019 at 13:06

jonrsharpe · Accepted Answer · 2019-09-16 13:04:02Z

3

Imperative code inside functional components must go inside useEffect or similar custom hooks. You could store the response in a state variable. And render only when the data get's resolved.

const App = () =>{
    const [data, setData] = useState(null)

    useEffect(() =>{
        axios.get(url)
            .then(res => setData(res.data))
    },[])


    return(
        <div>
           {
            data &&  Object.keys(data).map((key) => {
               console.log(list[key].name);
               return (<li key={key}>{list[key].name}</li>)
            })
            }
        </div>
    )
}

edited Sep 16, 2019 at 13:04

jonrsharpe

123k31 gold badges277 silver badges488 bronze badges

answered Sep 16, 2019 at 13:00

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yasin Yörük Over a year ago

Thanks, I made little changes on the code but this is working for me. Also I read the doc, presented by Alexander in the question's comment block. Document also helped me.

Collectives™ on Stack Overflow

React JSX rendering with axios response

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related