How can i React ( get axios from Json and ReRandering my page)

Why am I asking this question (main return) is finsied, but

board.writer

is not drawing. how can i drawing this object

if my question is wrong way plz tell me . i will fix it

i tried this way

  1. first use map function
  2. make like this function renderUser = ({board_SEQ, content, writer,subject}) => {
  3. parameter
  4. }
    const Home = () => {
        const initboard = {
            board_SEQ: '',
            writer: '',
            content: '',
            subject: ''
        };
    
        const [boards, setBoard] = useState([]);
    
    
        const load = () => {
            axios.get('http://www.heon.shop:8080/api/boards')
                .then((res) => {
                    const data = res.data;
    
                    setBoard(boards => [...boards, {
                        board_SEQ: (data[0].board_SEQ),
                        writer: data[0].writer,
                        content: data[0].content,
                        subject: data[0].subject
                    }]);
    
    
                })
                .catch((error) => {
                        console.log("error" + error);
                    }
                );
    
        }
        useEffect(() => {
            load();
            console.log("useEffect");
        }, []);
    
        const renderUser = ({board_SEQ, content, writer, subject}) => {
            return (
                <div>
                    <li>he</li>
                    <li>{board_SEQ}</li>
                    <li>{content}</li>
                    <li>{writer}</li>
                    <li>{subject}</li>
                </div>
            );
        }
    
    
        return (
    
            <div>
                {boards.map(board => {
                    <h1> {board.writer}</h1>
                })}
            </div>
        );
    
    }
    export default Home;

1 answer

  • answered 2021-07-31 06:07 siva ragala

    Maybe you can try like this,

     <div>
        {boards.map(board => renderUser(board)}
     </div>
    

    if you want to render item directly using (add return to the map):

     <div>
        {boards.map(board => {
           return <h1> {board.writer}</h1>;
        })}
     </div>
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum