display selected row of json data in reactjs

Question

guys I want to show any of the records in JSON data one by one without using map but when I start using [] the react app stop working what is my problem, i used {news[0].title} but i dont know whats wrong about it, the code is:

function News() {
    const [news, fetchnews] = useState([]);
    const getData = () => {
          fetch('https://example.com/v1/news/list/fa/1')
          .then((res) => res.json())
          .then((res) => {
            console.log(res);
            fetchnews(res?.news);
          });
    };
    useEffect(() => {
      getData()
    }, [])
    return (
        <section id="news">
            <div className="container-fluid">
              <div className="headline-news row">
                  <div className="col-12 col-lg-6 col-sm-12 col-md-12 headline-text">
                  <h2>اخبار</h2>
                  <h1>{news[0].title}</h1>
                  <p>{news[0].short}</p>
                  <a className="headline-btn btn btn-primary btn-lg" href="#" role="button">ادامه مطلب</a>
                  </div>
                  <div className="col-12 col-lg-4 col-sm-12 col-md-12 headline-img">
                  <img className="figure-img" src={news[0].image} alt=""/>
                  <a href="#">آرشیو کامل اخبار</a>
                  </div>
              </div>
              <div className="breaking-news row">
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news[1].title}</h3>
                  <p>{news[1].short}</p>
                  </div>      
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news[2].title}</h3>
                  <p>{news[2].short}</p>
                  </div>       
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news[3].title}</h3>
                  <p>{news[3].short}</p>
                  </div>
              </div>
            </div>
        </section>
    );
  }
  
  export default News; ```

help me with this problem guys is there any resource to give complete and fixed details about JSON and JSON files and how we can use it?

Answer 1

Check If the data is available or not in every place.

function News() {
    const [news, fetchnews] = useState([]);
    const getData = () => {
          fetch('https://example.com/v1/news/list/fa/1')
          .then((res) => res.json())
          .then((res) => {
            console.log(res);
            fetchnews(res?.news);
          });
    };
    useEffect(() => {
      getData()
    }, [])
    return (
        <section id="news">
            <div className="container-fluid">
              <div className="headline-news row">
                  <div className="col-12 col-lg-6 col-sm-12 col-md-12 headline-text">
                  <h2>اخبار</h2>
                  <h1>{news.length && news[0]?.title}</h1>
                  <p>{news.length && news[0]?.short}</p>
                  <a className="headline-btn btn btn-primary btn-lg" href="#" role="button">ادامه مطلب</a>
                  </div>
                  <div className="col-12 col-lg-4 col-sm-12 col-md-12 headline-img">
                  <img className="figure-img" src={news.length && news[0]?.image} alt=""/>
                  <a href="#">آرشیو کامل اخبار</a>
                  </div>
              </div>
              <div className="breaking-news row">
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news.length && news[1]?.title}</h3>
                  <p>{news.length && news[1]?.short}</p>
                  </div>      
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news.length && news[2]?.title}</h3>
                  <p>{news.length && news[2]?.short}</p>
                  </div>       
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news.length && news[3]?.title}</h3>
                  <p>{news.length && news[3]?.short}</p>
                  </div>
              </div>
            </div>
        </section>
    );
  }
  
  export default News;

The second Best Solution is that use the slice method

{[...news.slice(1)].map((data ,index)=>{
const {title , short} = data
return (
    <div className="breaking-news row">
                      <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                      <h3>{title}</h3>
                      <p>{short}</p>
                      </div>
)})         
}